主要討論它的結(jié)構(gòu)和一些重要的屬性。我將使用一種慢慢改善的方式介紹它。
1）基本的結(jié)構(gòu)如下：<tr>表示表格中的一行，<td>表示一行中的一列。說一列，其實可以
把它想象成word中的單元格。<th>實際上也是單元格，只不過它用作表格標(biāo)題。從語義上來
說：<td>標(biāo)示表格中的數(shù)據(jù)單元，<th>表示表格中一列或者是一行的標(biāo)題。
<table>
<tr><th></th></tr>
<tr><td><td></tr>
</table>
2)一個標(biāo)題，可能是行標(biāo)題，也可能是列標(biāo)題，如何區(qū)分？需要使用scope屬性scope=row/col。
<table>
<tr><th scope="col"></th></tr>
<tr><td><td></tr>
</table>
3)表格也有自己的標(biāo)題<caption>
<table>
<caption>表格標(biāo)題</caption>
<tr><th scope="col"></th></tr>
<tr><td><td></tr>
</table>
4)給表格添加簡介summary屬性
<table summary="這是一個表格的內(nèi)容簡介">
<caption>表格標(biāo)題</caption>
<tr><th scope="col"></th></tr>
<tr><td><td></tr>
</table>
5）表格邊框模型和單元格默認(rèn)padding。
表格邊框有兩種顯示方式：分離和合并。border-collapse: separate/collapse IE6默認(rèn)的樣式是
分離的，看起來像立體的。實際上，不過是每個單元格都有自己獨立的邊框。合并則是共享邊框。
table { border-collapse: collapse; }
單元格之間默認(rèn)是有空白的，可以用border-spacing控制它，因為IE6不支持，所以很少用到。IE6
使用cellspacing。
<table summary="這是一個表格的內(nèi)容簡介" cellspacing="0">
<caption>表格標(biāo)題</caption>
<tr><th scope="col"></th></tr>
<tr><td><td></tr>
</table>
6）添加一些行和列。并給每一個<th>添加一個id。
<table summary="這是一個表格的內(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>，把表格分成多個邏輯區(qū)域后，可以用CSS更好
的控制表現(xiàn)。
<table summary="這是一個表格的內(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)，希望有用。
