符合标准的Table设计

七年前，我第一次接触网页制作，使用的是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>

效果如下：

	COL1	COL2
ROW1	11	12
ROW2	21	22

<table>、<tr>和<td>组成了一个基本的表格，我们曾经就是这样定义的。但实际上，我们定义的表格往往有更实际的意义。就像在Excel中的那样，我们在网页中定义的表格，也需要标题和表头。这样，我们就需要添加额外的<caption>和<th>来实现。

<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>

效果如下：

My Friends

Name	Age
BoTong	23
XiaoHu	20

这样，表格所要表达的数据就相当清晰了。同时，对于屏幕阅读设备来说，它将理解表头是如何与表格数据关联起来的，上面的表格将读作“Name,BoTong,Age,23,Name,XiaoHu,Age,20”。这样就大大的增强了表格的可访问性。我们在<table>标签中添加了一个summary属性，这个属性并不会表达在页面上，它只是增强表格的可访问性，用以对表格进行简要的介绍。
这样设计的表格似乎已经达到了我们的所有要求，但是在遇到长表格的时候，打印表格出现了困难。我们希望在每一页的表格上不都能出现表头，但刚才的设计并不能达到这种要求。并没有直接的因果关系，标准中引入了<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>

效果如下：

My Friends

Name	Age
Name	Age
BoTong	23
XiaoHu	20

从视觉上来说，这个表格和上面的表格并没有什么不同（底部加了一个<tfoot>的实现）。但从语义和结构上来说，这个表格已经有了很大的进步。

（未完待续）