|
|
 |
 |
|
 |
|
| 你得尽量的去避免用表格来布局 |
对于那些刚接触CSS布局的人来说，常对如何使用表格（table）感到迷惑。我在很多地方看到人们把“避免用表格来布局”理解成“完全不使用table标签”。值得注意的是，表格是可以用的而且非常好用——只要用的正确。
是的，你得尽量的去避免用表格来布局。但是对于表格型数据，你就应该使用table。我想谈谈如何使用表格来组织表现表格型数据。在HTML和XHTML里，表格不仅仅是行（row）和单元格（cell），还有很多其他元素，特别是如果你想让数据更加容易理解。
首先来点背景知识，“避免用表格来布局”这句话可以在HTML 4.01 规范的表格介绍部分里面找到：
表格不应该纯粹的被用来布局文档内容，这样可能在处理渲染非可视媒体的时候产生问题。另外，当和图片一起使用的时候，这些表格可能在某个系统上显示过大而强迫用户拖动水平滚动条，为了减少这些问题，设计者应该使用样式表来控制布局而不是表格。
这样已经很明白了，尽管文档中说“应该”而不是“必须”，所以这个规范还是有弹性的。
但是本文并不是讨论是否使用表格布局，而是使用表格来组织表现表格型数据——这是表格诞生的本意。
当表格用来组织实际的数据时，不仅仅是一个编排布局的格子而已。一般人可以从表格的编排和表现上看出标题和数据单元格之间的关系。盲人或者有视觉障碍的人则不能做到这一点。如果一个表格要让那些使用屏幕阅读器或用其他非可视用户代理（UA）的人们能够理解，它则需要告诉用户代理它包含的信息之间是如何联系起来的。
幸运的是，HTML在这方面提供了很多元素和属性。然而，使用这些可以增强易用性和语义化的功能比较难而且本身不容易理解。在本文中，我尝试着解释如何使用他们。
一个视力正常的人，很容易并且很快就可以明白表头和数据单元格之间的关系。从另一方面讲，那些使用屏幕阅读器的人可以听到如下顺序的词：公司，雇员，成立于，ACME Inc，1000，1947，XYZ Corp，2000，1973。不是十分容易明白其中的关系。
第一步——最简单的——通过适当的标出表头来使得表格更加有意义。很简单：只要使用<th>标签取代表头的<td>标签即可。
这个例子虽然简单，但是已经包含了足够的信息使得屏幕阅读器能够让使用者明白表头和数据单元格之间的关系。一个屏幕阅读器一般会这么读：公司: ACME Inc. ，雇员: 1000，成立于: 1947., 以此类推。比之前好多了。
表格标题， <caption>
<caption>标签可以为表格提供一个简短的说明，和图像的说明比较类似。默认情况下，大部分可视化浏览器显示表格标题在表格的上方中央。CSS里的caption-side属性用来控制表格标题显示的地方。大部分浏览器只能把表格标题显示在表格的上方或者下方，只有一些浏览器支持左边或者右边。这个就留给大家去试试了。
当然你也可以用CSS去样式化表格标题。然而，要在不同浏览器里获得同样的效果还需要一定的技巧，这个也留给各位去实践了。
这样样式化表头、表尾和表身比较方便，而且独立，不必要给每个标签加样式或class。
当打印比较长的表格的时候，一些浏览器（比如基于Mozilla的）会在每一页的开头重复表头和表尾的内容，这样阅读打印版本的表格就比较方便。
看来要用HTML做一个有语义化的数据表格有很多工作。对于复杂的表格是这样的。有时候基本上是不可能手工写出来的。但是对于简单的表格，那么使用一个<th>加上scope属性就可以了，又快又简单。
非常明显，语义化的表格对于使用屏幕阅读器或其他辅助技术的浏览者非常有好处。让那些巨大而复杂的表格“听”起来很有意义是非常困难的，所以尽可能的使表格简单。
另外对于使用可视化浏览器的设计者和用户也是有好处的：一个语义化的表格有大量的接口可以利用CSS来样式化，好的样式可以让表格更加易用。
除了本文，还有更多关于数据表格内容。比如这里就没有提到axis属性，并且对于<colgroup>和<col>的描述也不是很深。对于格式化和样式化还有border模型我也没有深究，还缺少一个真正复杂的表格的例子。 |
|
|
 |
|
 |
 |
七彩课堂推荐教程 |
|
|
