表格表格高級(jí)

表格表單
表單的作用：用來(lái)收集用戶(hù)的信息的；
表單的組成：
表單域<form name="" method="" action=""></form>
表單控件<input type="text" value=""/>
表單相關(guān)的標(biāo)簽
1，表單字段集
<fieldset></fieldset>
功能：相當(dāng)于一個(gè)方框，在字段集中可以包含文本和其他元素。該元素用于對(duì)表單中的元素進(jìn)行分組，并在文檔中區(qū)別標(biāo)出文本。fieldset元素可以嵌套，在其內(nèi)部可以在設(shè)置多個(gè)fieldset對(duì)象。
2，字段級(jí)標(biāo)題
<legend></legend>
功能：legend元素可以在fieldset對(duì)象繪制的方框內(nèi)插入一個(gè)標(biāo)題。legend元素必須是fieldset內(nèi)的第一個(gè)元素。
3，表單元素

1）上傳文件框
文件域：<input type="file" />
2）圖像域（圖片按鈕）
<input type=“image” width=“100” height=“100” alt=“” src=“路徑”/>
4，提示信息標(biāo)簽
<label for="綁定控件id名"></label>
功能：label元素用來(lái)定義標(biāo)簽，為頁(yè)面上的其他元素指定提示信息。要將label元素綁定到其他的控件上，可以將label元素的for屬性設(shè)置為與該控件的id屬性值相同。
表格相關(guān)的屬性
1、單元格間距(該屬性必須給table添加)
border-spacing:value;
?
2、合并相鄰單元格邊框
border-collapse:separate(邊框分開(kāi))/collapse(邊框合并)；（寫(xiě)1像素邊框表格）
3、無(wú)內(nèi)容單元格顯示、隱藏
empty-cells:show/hide;
?4、表格布局算法
table-layout:auto/fixed(固定寬度，不會(huì)隨內(nèi)容多少改變單元格寬度）
?
自動(dòng)表格布局：列的寬度是由列單元格中沒(méi)有折行的最寬的內(nèi)容設(shè)定的。
缺點(diǎn)：較慢（因?yàn)樗枰诖_定最終的布局前訪(fǎng)問(wèn)表格中的所有內(nèi)容）。
優(yōu)點(diǎn)：靈活
固定表格布局
優(yōu)點(diǎn)：加快運(yùn)行的速度,允許瀏覽器更快的對(duì)表格進(jìn)行布局。
缺點(diǎn):不太靈活
5、表格標(biāo)題
<caption>標(biāo)題內(nèi)容</caption>
表格標(biāo)題位置：caption-side:top/right/bottom/left
說(shuō)明：left,right位置只有火狐識(shí)別，top,bottom IE7上版本支持，ie7以下版本不支持其它屬性值，只識(shí)別top
6、表格布局元素
1、表格基本組成
table（表格）??????tr（行） ?????td（列）
th:表格列標(biāo)題（放在tr里）
重要屬性：
1）、colspan=“value”????合并列 2）、rowspan="value"???和并行
3）、valign="top/bottom/middle" 垂直對(duì)齊方式?
?水平對(duì)齊：align=left/center/right
４）rules="groups/rows/cols/all/none"????添加組分隔線(xiàn)
說(shuō)明：
rows:位于行之間的線(xiàn)條
cols:位于列之間的線(xiàn)條
all：位于行和列之間的線(xiàn)條
none:沒(méi)有線(xiàn)條
groups:位于行組和列組之間的線(xiàn)條
2、數(shù)據(jù)行分組
<thead></thead> ?????表頭
<tbody></tbody> ?????表體
<tfoot></tfoot>?????????表尾

說(shuō)明：1.一個(gè)Table中，只能包含一個(gè)thead,一個(gè)tfoot,但可包含多個(gè)tbody。不會(huì)影響到表格的布局
3、數(shù)據(jù)列分組
<colgroup span="value"></colgroup>
<col??? span="value" />
說(shuō)明：
1）col和colgroup元素會(huì)根據(jù)從左到右的順序依次對(duì)數(shù)據(jù)表格進(jìn)行分組。
2）span屬性顯示指定相鄰幾列組成一組，span屬性值默認(rèn)為1，默認(rèn)時(shí)僅定義一列為一組。
3）可以通過(guò)給table添加rules="groups"屬性來(lái)給分組列添加組分割線(xiàn)。
注意：雖然col和colgroup具有相同的功能，但是，我們只能使用colgroup元素來(lái)決定表格內(nèi)容部分分割線(xiàn)（rules）應(yīng)該處于的位置，而col沒(méi)有這個(gè)功能。