七年前,我第一次接触网页制作,使用的是Frontpage 2000。制作一个网页,就像Word中制作表格一样,拖拉几下就完成了。当时的概念是,网页就是一个大的表格,可以往单元格里插入字符、图片等等。时至今日,在Web标准潮流的冲击下,表格被越来越多的Web设计者们所抛弃,取而代之的是大量的div。我们今天不去讨论“div症”,而是再谈Table,谈谈如何正确的使用符合Web标准的Table。
先定义一个简单的表格:<table border="1">
<tr>
<td></td>
<td>COL1</td>
<td>COL2</td>
</tr>
<tr>
<td>ROW1</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>ROW2</td>
<td>21</td>
<td>22</td>
</table>
效果如下:<tr>
<td></td>
<td>COL1</td>
<td>COL2</td>
</tr>
<tr>
<td>ROW1</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>ROW2</td>
<td>21</td>
<td>22</td>
</table>
COL1 | COL2 | |
ROW1 | 11 | 12 |
ROW2 | 21 | 22 |
<table border="1" summary="These are my friends.">
<caption>My Friends</caption>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>BoTong</td>
<td>23</td>
</tr>
<tr>
<td>XiaoHu</td>
<td>20</td>
</tr>
</table>
效果如下:<caption>My Friends</caption>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>BoTong</td>
<td>23</td>
</tr>
<tr>
<td>XiaoHu</td>
<td>20</td>
</tr>
</table>
Name | Age |
---|---|
BoTong | 23 |
XiaoHu | 20 |
这样设计的表格似乎已经达到了我们的所有要求,但是在遇到长表格的时候,打印表格出现了困难。我们希望在每一页的表格上不都能出现表头,但刚才的设计并不能达到这种要求。并没有直接的因果关系,标准中引入了<thead>、<tbody>和<tfoot>,用以更好的表达表格的结构。从这三个标签的名字上,很容易理解它们的意义。但需要注意的是,<tfoot>最好紧跟在<thead>之后(<tbody>之前),并且在数据上与<thead>保持一致。这样做是为了让浏览器更好的理解表格结构。那么,上面的表格就会变成这样:
<table border="1">
<caption>My Friends</caption>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>BoTong</td>
<td>23</td>
</tr>
<tr>
<td>XiaoHu</td>
<td>20</td>
</tr>
</tbody>
</table>
效果如下:<caption>My Friends</caption>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>BoTong</td>
<td>23</td>
</tr>
<tr>
<td>XiaoHu</td>
<td>20</td>
</tr>
</tbody>
</table>
Name | Age |
---|---|
Name | Age |
BoTong | 23 |
XiaoHu | 20 |
(未完待续)