主要討論它的結構和一些重要的屬性。我將使用一種慢慢改善的方式介紹它。
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>
我的這篇隨筆只簡單講一講表格的結構，希望有用。