在講網頁表格的結構化標記之前，還是先看幾幅圖片。
Html表格的結構化
所謂的結構化，正如上述第一副圖所示，就是把我們的表格劃分為三種：表頭、表體、表尾。從而當我們在修改表體部分的時候，不會影響到其它兩部分，從而解除了耦合，方便我們的應用。
結構化格式
XML/HTML Code復制內容到剪貼板
- <table>
-
- <thead>…</thead> --------表頭區
-
- <tbody>…</tbody>---------表體區
-
- <tfoot>…</tfoot>------------表尾區
-
- </table>
總結：通過把表格劃分為三部分，方便了我們對表格的編輯操作。
Html表格的標題
每個表格都有自己的標題，正如上述第二幅圖片所示，那么又如何做到讓標題隨著內容來移動呢？
表格的標題
XML/HTML Code復制內容到剪貼板
- <table>
-
- <caption>…</caption>
-
- </table>
<caption>下的屬性值有：
|
屬性名稱
|
屬性值
|
說明
|
align
|
Top
|
標題在表格上方
|
Bottom
|
標題在表格下方
小結：通過設置表格的標題，能夠隨時讓標題跟著表格動。
Html直列化格式
什么是表格的直列化格式呢？我們平常在Excel中所見到的給整列加背景顏色，說的就是這么一回事。
<colgroup>…<colgroup>
|
屬性名稱
|
屬性值
|
說明
|
Align
|
Left
|
靠左
|
Center
|
考中
|
Right
|
靠右
|
Valign
|
Right
|
靠右
|
Top
|
考上
|
Middle
|
靠中
|
Bottom
|
靠下
|
Span
|
數字
|
直列數
小結：通過設置表格的直列化格式，能夠對我們需要的內容進行加深顏色，這里只是針對的列內容。
源代碼如下：
以上就是小編為大家帶來的淺談Html網頁表格結構化標記的應用的全部內容了，希望對大家有所幫助，多多支持腳本之家~
