用标准的CSS定义你的表格样式

本文介绍如何正确使用xHTML语言里的table标签——他应该只为展示数据所用。本文将帮助你赋予您的表格可达性，并教会你如何用CSS来定义你的表格以获得需要的视觉效果。

XHTML部分

如果你读过我关于表格问题的 第一篇文章，你可能还记得我建议你读一读Roger的 ‘Bring on the tables’ [表格全接触]。在这个问题上他的讨论的深度已达极致。不过，我还是想提醒您一些事情，在你想编写出拥有良好可达性的表格代码时请务必牢记这些原则：

为什么要使用表头和指定scope属性？

这至少能带给你两个好处。第一，这会让你的表格对使用屏幕阅读器的人更可及。第二，这样做能帮助你更容易地用CSS控制表格样式。你可以给所有的th 元素单独的CSS样式，让它们以不同于其他表格单元的样式显示。添加scope属性可以让使用屏幕阅读器的人更好的“听懂”表格。这样可以轻松地做到让表格头与相应的数据单元格相关联，不过如果表格中有两种表头：标识着一行数据的表头和标识着一列数据的表头，这个表格对于使用屏幕阅读器的人来说仍然是不易理解的。我们使用scope属性表示表头应该如何发挥作用，以及它们是如何与单元格里的数据相关联。

示范代码：

—————————————-

<table border="0"><tbody><tr><td></td><th scope="col">Webhosting Home</th><th scope="col">Webhosting Home Plus</th></tr><tr><th scope="row">Data usage</th><td>1 GB per month</td><td>2 GB per month</td></tr></tbody></table>

—————————————-

什么时候使用表格头的abbr（缩写）属性

你也可以使用abbr属性为表格的可及性做更多。 当然，表头很长的时候这是非常值得一用的。

<table><tr><td></td><th scope="col" abbr="Home">Webhosting Home for limited usage</th><th scope="col" abbr="Home Plus">Webhosting Home Plus for more extended usage</th></tr>...</table>