淺談html table 標簽

2020-03-24 19:00:30

字體：大中小

來源：轉載

供稿：網友

主要討論它的結構和一些重要的屬性。我將使用一種慢慢改善的方式介紹它。
1）基本的結構如下： tr 表示表格中的一行， td 表示一行中的一列。說一列，其實可以
把它想象成word中的單元格。 th 實際上也是單元格，只不過它用作表格標題。從語義上來
說： td 標示表格中的數據單元， th 表示表格中一列或者是一行的標題。

復制代碼代碼如下:
table
tr th /th /tr
tr td td /tr
/table

2)一個標題，可能是行標題，也可能是列標題，如何區分？需要使用scope屬性scope=row/col。

復制代碼代碼如下:
table
tr th scope="col" /th /tr
tr td td /tr
/table

3)表格也有自己的標題 caption

復制代碼代碼如下:
table
caption 表格標題 /caption
tr th scope="col" /th /tr
tr td td /tr
/table

4)給表格添加簡介summary屬性

復制代碼代碼如下:
table summary="這是一個表格的內容簡介"
caption 表格標題 /caption
tr th scope="col" /th /tr
tr td td /tr
/table

5）表格邊框模型和單元格默認padding。
表格邊框有兩種顯示方式：分離和合并。border-collapse: separate/collapse IE6默認的樣式是
分離的，看起來像立體的。實際上，不過是每個單元格都有自己獨立的邊框。合并則是共享邊框。
table { border-collapse: collapse; }
單元格之間默認是有空白的，可以用border-spacing控制它，因為IE6不支持，所以很少用到。IE6
使用cellspacing。

復制代碼代碼如下:
table summary="這是一個表格的內容簡介" cellspacing="0"
caption 表格標題 /caption
tr th scope="col" /th /tr
tr td td /tr
/table

6）添加一些行和列。并給每一個 th 添加一個id。

復制代碼代碼如下:
table summary="這是一個表格的內容簡介" cellspacing="0"
caption 表格標題 /caption
tr
th scope="col" id="name" 姓名 /th
th scope="col" id="address" 地址 /th
th scope="col" id="databirthday" 出生日期 /th
/tr
tr
td ewee td
td hubei td
td 19870102 td
/tr
tr
td rewe td
td wuhan td
td 419880103 td
/tr
tr
td ertww td
td yichang td
td 19870205 td
/tr
/table

7）對表格進行邏輯劃分 thead tbody tfoot ，把表格分成多個邏輯區域后，可以用CSS更好
的控制表現。

復制代碼代碼如下:
table summary="這是一個表格的內容簡介" cellspacing="0"
caption 表格標題 /caption
thead
tr
th scope="col" id="name" 姓名 /th
th scope="col" id="address" 地址 /th
th scope="col" id="databirthday" 出生日期 /th
/tr
/thead
tbody
tr
td ewee td
td hubei td
td 19870102 td
/tr
tr
td rewe td
td wuhan td
td 419880103 td
/tr
tr
td ertww td
td yichang td
td 19870205 td
/tr
tbody
/table

我的這篇隨筆只簡單講一講表格的結構，希望有用。

html教程

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

上一篇：HTML table屬性你知道多少，進來了解一下？

下一篇：HTML5的結構和語義(5)-內嵌媒體