浅谈<table>标签

总的来说，<table>是个复杂的东西，关于它的主题也很多。我想简单的复习一下<table>。
主要讨论它的结构和一些重要的属性。我将使用一种慢慢改善的方式介绍它。
1）基本的结构如下：<tr>表示表格中的一行，<td>表示一行中的一列。说一列，其实可以
把它想象成word中的单元格。<th>实际上也是单元格，只不过它用作表格标题。从语义上来
说：<td>标示表格中的数据单元，<th>表示表格中一列或者是一行的标题。

 <table>
2  <tr><th></th></tr>
3  <tr><td><td></tr>
4 </table>

2)一个标题，可能是行标题，也可能是列标题，如何区分？需要使用scope属性scope=row/col。

 

 <table>
2  <tr><th scope="col"></th></tr>
3  <tr><td><td></tr>
4 </table>

 
3)表格也有自己的标题<caption>

  <table>
2   <caption>表格标题</caption>
3   <tr><th scope="col"></th></tr>
4   <tr><td><td></tr>
5  </table>

4)给表格添加简介summary属性

 <table summary="这是一个表格的内容简介">
2   <caption>表格标题</caption>
3   <tr><th scope="col"></th></tr>
4  <tr><td><td></tr>
5 </table>

 

5）表格边框模型和单元格默认padding。
表格边框有两种显示方式：分离和合并。border-collapse: separate/collapse IE6默认的样式是
分离的，看起来像立体的。实际上，不过是每个单元格都有自己独立的边框。合并则是共享边框。
table {  border-collapse: collapse; }
单元格之间默认是有空白的，可以用border-spacing控制它，因为IE6不支持，所以很少用到。IE6
使用cellspacing。

 <table summary="这是一个表格的内容简介" cellspacing="0">
2   <caption>表格标题</caption>
3   <tr><th scope="col"></th></tr>
4   <tr><td><td></tr>
5 </table>

 

6）添加一些行和列。并给每一个<th>添加一个id。

 

 1 <table summary="这是一个表格的内容简介" cellspacing="0">
 2   <caption>表格标题</caption>
 3   <tr>
 4     <th scope="col" id="name">姓名</th>
 5     <th scope="col" id="address">地址</th>
 6     <th scope="col" id="databirthday">出生日期</th>
 7   </tr>
 8
 9   <tr>
10     <td>ewee<td>
11     <td>hubei<td>
12     <td>19870102<td>
13   </tr>
14 
15   <tr>
16     <td>rewe<td>
17     <td>wuhan<td>
18     <td>419880103<td>
19   </tr>
20 
21   <tr>
22     <td>ertww<td>
23     <td>yichang<td>
24     <td>19870205<td>
25   </tr>
26 
27 </table>

 

7）对表格进行逻辑划分 <thead><tbody><tfoot>，把表格分成多个逻辑区域后，可以用CSS更好
的控制表现。

 1<table summary="这是一个表格的内容简介" cellspacing="0">
 2  <caption>表格标题</caption>
 3  <thead>
 4  <tr>
 5    <th scope="col" id="name">姓名</th>
 6    <th scope="col" id="address">地址</th>
 7    <th scope="col" id="databirthday">出生日期</th>
 8  </tr>
 9  </thead>
10
11  <tbody>
12   <tr>
13    <td>ewee<td>
14    <td>hubei<td>
15    <td>19870102<td>
16   </tr>
17 
18   <tr>
19    <td>rewe<td>
20    <td>wuhan<td>
21    <td>419880103<td>
22   </tr>
23 
24   <tr>
25    <td>ertww<td>
26    <td>yichang<td>
27    <td>19870205<td>
28  </tr>
29  <tbody>
30  
31</table>
32

我的这篇随笔只简单讲一讲表格的结构，希望有用。