网页Web标准化教程关于表格的应用

• 原文：Bring on the tables
• 作者：Roger Johansson
• 译者：JunChen Wu

对于那些刚接触CSS布局的人来说，常对如何使用表格（table）感到迷惑。我在很多地方看到人们把“避免用表格来布局”理解成“完全不使用table标签”。值得注意的是，表格是可以用的而且非常好用——只要用的得当。

是的，你得尽量的去避免用表格来布局。但是对于表格型数据，你就应该使用table。我想谈谈如何使用表格来组织表现表格型数据。在HTML和XHTML里，表格不仅仅是行（row）和单元格（cell），还有很多其他元素，特别是如果你想让数据更加容易理解。

首先来点背景知识，“避免用表格来布局”这句话可以在HTML 4.01 规范的表格介绍部分里面找到：

表格不应该纯粹的被用来布局文档内容，这样可能在处理渲染非可视媒体的时候产生问题。另外，当和图片一起使用的时候，这些表格可能在某个系统上显示过大而强迫用户拖动水平滚动条，为了减少这些问题，设计者应该使用样式表来控制布局而不是表格。

这样已经很明白了，尽管文档中说“应该”而不是“必须”，所以这个规范还是有弹性的。

但是本文并不是讨论是否使用表格布局，而是使用表格来组织表现表格型数据——这是表格诞生的本意。

当表格用来组织实际的数据时，不仅仅是一个编排布局的格子而已。一般人可以从表格的编排和表现上看出标题和数据单元格之间的关系。盲人或者有视觉障碍的人则不能做到这一点。如果一个表格要让那些使用屏幕阅读器或用其他非可视用户代理（UA）的人们能够理解，它则需要告诉用户代理它包含的信息之间是如何联系起来的。

幸运的是，HTML在这方面提供了很多元素和属性。然而，使用这些可以增强易用性和语义化的功能比较难而且本身不容易理解。在本文中，我尝试着解释如何使用他们。

表头， <th>

让我们从一个非常简单的表格开始——只包含一行表头和两行三列的数据。如果用以前流行的做法，只用表格的行和单元格，写出来就如下：

1. <table>
2. <tr>
3. <td>公司</td>
4. <td>雇员</td>
5. <td>成立于</td>
6. </tr>
7. <tr>
8. <td>ACME Inc</td>
9. <td>1000</td>
10. <td>1947</td>
11. </tr>
12. <tr>
13. <td>XYZ Corp</td>
14. <td>2000</td>
15. <td>1973</td>
16. </tr>
17. </table>

没有边框和修饰，那么上面的代码在你现在的浏览器里看起来就如下：

公司	雇员	成立于
ACME Inc	1000	1947
XYZ Corp	2000	1973

用CSS稍微修饰一下表格，你可以使表头在图形化浏览器里面更加明显：

公司	雇员	成立于
ACME Inc	1000	1947
XYZ Corp	2000	1973

一个视力正常的人，很容易并且很快就可以明白表头和数据单元格之间的关系。从另一方面讲，那些使用屏幕阅读器的人可以听到如下顺序的词：公司，雇员，成立于，ACME Inc，1000，1947，XYZ Corp，2000，1973。不是十分容易明白其中的关系。

第一步——最简单的——通过适当的标出表头来使得表格更加有意义。很简单：只要使用<th>标签取代表头的<td>标签即可。

1. <table>
2. <tr>
3. <th>公司</th>
4. <th>雇员</th>
5. <th>成立于</th>
6. </tr>
7. <tr>
8. <td>ACME Inc</td>
9. <td>1000</td>
10. <td>1947</td>
11. </tr>
12. <tr>
13. <td>XYZ Corp</td>
14. <td>2000</td>
15. <td>1973</td>
16. </tr>
17. </table>

公司	雇员	成立于
ACME Inc	1000	1947
XYZ Corp	2000	1973

这个例子虽然简单，但是已经包含了足够的信息使得屏幕阅读器能够让使用者明白表头和数据单元格之间的关系。一个屏幕阅读器一般会这么读：

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有