Html表格的結構化

所謂的結構化，就是把我們的表格劃分為三種：表頭、表體、表尾。從而當我們在修改表體部分的時候，不會影響到其它兩部分，從而解除了耦合，方便我們的應用。

結構化格式

 table  thead … /thead --------表頭區  tbody … /tbody ---------表體區  tfoot … /tfoot ------------表尾區  /table 

總結：通過把表格劃分為三部分，方便了我們對表格的編輯操作。

Html表格的標題

每個表格都有自己的標題，正如上述第二幅圖片所示，那么又如何做到讓標題隨著內容來移動呢？

表格的標題

 table  caption … /caption  /table 

caption 下的屬性值有：

屬性名稱

屬性值

說明

align

Top

標題在表格上方

Bottom

標題在表格下方

小結：通過設置表格的標題，能夠隨時讓標題跟著表格動。
Html直列化格式

什么是表格的直列化格式呢？我們平常在Excel中所見到的給整列加背景顏色，說的就是這么一回事。

 html  head  li 表格嵌套的使用一 /li  table width= 500  td align= center 學生成績表 /td  /tr  table border= 1 width= 100%  thead  th 姓名 /th  th 語文 /th  th 數學 /th  th 外語 /th  /tr  /thead  tbody  td 張三 /td  td 95 /td  td 95 /td  td 95 /td  /tr  td 張三 /td  td 95 /td  td 95 /td  td 95 /td  /tr  td 張三 /td  td 95 /td  td 95 /td  td 95 /td  /tr  /tbody  tfoot  td colspan= 4 成績匯總 /td  /tr  /tfoot  /table  /td  /tr  /table  br/  li 表格嵌套的使用二 /li  table border= 1 width= 500  caption align= bottom 學生成績 /caption  thead  th 姓名 /th  th 語文 /th  th 數學 /th  th 外語 /th  /tr  /thead  tbody  td 張三 /td  td 95 /td  td 95 /td  td 95 /td  /tr  td 張三 /td  td 95 /td  td 95 /td  td 95 /td  /tr  td 張三 /td  td 95 /td  td 95 /td  td 95 /td  /tr  /tbody  tfoot  td colspan= 4 成績匯總 /td  /tr  /tfoot  /table  br/  li 表格嵌套的使用三 /li  table border= 1 width= 500  caption align= bottom 學生成績 /caption  col /col  col bgcolor=blue /col  thead  th 姓名 /th  th 語文 /th  th 數學 /th  th 外語 /th  /tr  /thead  tbody  td 張三 /td  td 95 /td  td 95 /td  td 95 /td  /tr  td 張三 /td  td 95 /td  td 95 /td  td 95 /td  /tr  td 張三 /td  td 95 /td  td 95 /td  td 95 /td  /tr  /tbody  tfoot  /tfoot  /table  /body  /head  /html 

相信看了這些案例你已經掌握了方法，更多精彩請關注php 其它相關文章！

相關閱讀：

怎樣用h5的sse服務器發送EventSource事件

H5的本地存儲和本地數據庫詳細介紹

用H5和C3實現簡單的時鐘效果

以上就是Html網頁表格結構化標記該如何使用的詳細內容，html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。