主頁 > 知識庫 > 淺談html table 標(biāo)簽

淺談html table 標(biāo)簽

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

復(fù)制代碼

代碼如下:

2)一個(gè)標(biāo)題，可能是行標(biāo)題，也可能是列標(biāo)題，如何區(qū)分？需要使用scope屬性scope=row/col。

復(fù)制代碼

代碼如下:

3)表格也有自己的標(biāo)題<caption>

復(fù)制代碼

代碼如下:

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

復(fù)制代碼

代碼如下:

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

復(fù)制代碼

代碼如下:

6）添加一些行和列。并給每一個(gè)<th>添加一個(gè)id。

復(fù)制代碼

代碼如下:

<table summary="這是一個(gè)表格的內(nèi)容簡介" cellspacing="0">
<caption>表格標(biāo)題</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）對表格進(jìn)行邏輯劃分 <thead><tbody><tfoot>，把表格分成多個(gè)邏輯區(qū)域后，可以用CSS更好
的控制表現(xiàn)。

復(fù)制代碼

代碼如下:

<table summary="這是一個(gè)表格的內(nèi)容簡介" cellspacing="0">
<caption>表格標(biāo)題</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>

我的這篇隨筆只簡單講一講表格的結(jié)構(gòu)，希望有用。

標(biāo)簽：通遼煙臺黃山山南賀州湘潭懷化湖北

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《淺談html table 標(biāo)簽》，本文關(guān)鍵詞；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。