下面將介紹如何玩轉各種表格和表單：
表格的作用：展示數據（盡量不做頁面布局）
表格的屬性：width、height、border、bordercolor
cellspacing=“ ” 清除單元格邊框的間距
cellpadding="" 內容距離邊框之間的邊距
align="" 水平對齊方式
valign="" 垂直對齊方式 top bottom middle
合並單元格： 合並行：rowspan 合並列: colspan
注：合並都是合並 td
表格重點屬性：
1、數據行分組
<thead></thead> 表格標題部分
<tbody></tbody> 表格內容部分
<tfoot></tfoot> 表格尾部部分
2、數據列分組
<colgroup span="value"></colgroup>
<!--span屬性為把幾列分為一組-->
3、標題
<th></th>列標題
<caption></caption>表格標題
4、表格屬性
4.1、單元格間距：border-spacing:value(px);
說明：單元格間距(該屬性必須給table添加) 表示單元格邊框之間的距離， 不可取負值
說明：合並相鄰單元格邊框 (該屬性必須給table添加) separate(邊框分開)默認值； collapse(邊框合並)
4.3、無內容時單元格的設置：empty-cells:show/hide;
說明：定義當單元格無內容時，是否顯示該單元格的邊框區域；show：顯示 ；hide：隱藏；
4.4、顯示單元格行和列的算法(加快運行的速度)： table-layout:auto/fixed;
說明：定義單元格行和列是否有內容決定，auto:自動；fixed：平均分配並固定
5、組分割線
rules="groups/rows/cols/all/none" 添加分隔線
說明：
rows:位於行之間的線條
cols:位於列之間的線條
all：位於行和列之間的線條
none:沒有線條
groups:位於行組和列組之間的線條
表單的作用：收集數據
1、單選按鈕組
<input type=“radio” name=“ral” />男
<input type=“radio” name=“ral” checked=“checked”/>(默認選中)女
注：name必須一致
2、復選框組
<input type="checkbox" name="" />
<input type="checkbox" name="" disabled="disabled" />
disabled="disabled" (禁用)
checked="checked" (默認選中)
3、下拉列表組
<select >
<option>下拉選項1</option>
<option>下拉選項2</option>
…………
</select>
表示下拉列表，name屬性不是必須的
默認選擇項用selected屬性；
4、表單域多行文本框
語法: <textarea name="" cols="列字符的寬度" rows="行字符寬度" ></textarea>
多行文本。rows屬性和cols屬性用來設置文本輸入窗口的高度和寬度，單位是字符。
阻止瀏覽器對窗口的拖動設置:{resize:none;}（css屬性，在css中設置）
5、上傳文件
語法：<input type="file">，選擇本地文件，需要與后排配合使用
語法：<fieldset></fieldset>
說明：相當於一個方框，在字段集中可以包含文本和其他元素。該元素用於對表單中的元素進行分組並在文檔中區別標出文本。
fieldset元素可以嵌套，在其內部可以在設置多個fieldset對象。disabled定義空間禁制可用；
2、字段級標題
語法：<legend align="left/center/right/justify"></legend>
說明：legend元素可以在fieldset對象繪制的方框內插入一個標題。
legend元素必須是fieldset內的唯一個元素。
3、提示信息標簽
語法：<label for="綁定控件id名"></label>
說明：label元素用來定義標簽，為頁面上的其他元素指定提示信息。
要將label元素綁定到其他的控件上，可以將label元素的for屬性設置為與該控件的id屬性值相同。
可以實現點擊提示信息使輸入框聚焦
<input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3School" value="http://www.W3School.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
如果感覺對自己有幫助，麻煩點一下關注，會一直盒大家分享知識的，謝謝！！！