淺談html table 標簽

2019-10-26 17:25:25

字體：大中小

來源：轉載

供稿：網友

主要討論它的結構和一些重要的屬性。我將使用一種慢慢改善的方式介紹它。
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>

上一篇：網頁設計 TabIndex元素

下一篇：ins標簽和del標簽的屬性和用法

發表評論

共有條評論