Oranwo Co

CSS标准化了的表格

原文链接：A CSS styled table version 2

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

XHTML部分

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

• 确保为表头[即某列或某行表格元素的标题，数据域标题。]使用 th元素并指定scope（范围）属性。[也就是使用类似<th scope="col">姓名</th>的代码]
• 为你的表格添加标题（caption），特别是当你的页面有不止一个表格的时候。
• 为表格元素添加summary（摘要）属性，清楚而简洁地描述表格内容
• 如果需要，可以通过使用thead，tfoot，tbody元素将表格行分组，以获得结构更加清晰的表格。

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

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

示范代码：

----------------------------------------

1. <table>
2. <tr>
3. <td></td>
4. <th scope="col">Webhosting Home</th>
5. <th scope="col">Webhosting Home Plus</th>
6. </tr>
7. <tr>
8. <th scope="row">Data usage</th>
9. <td>1 GB per month</td>
10. <td>2 GB per month</td>
11. </tr>
12. </table>

----------------------------------------

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

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

1. <table>
2. <tr>
3. <td></td>
4. <th scope="col" abbr="Home">Webhosting Home for limited usage</th>
5. <th scope="col" abbr="Home Plus">Webhosting Home Plus for more extended usage</th>
6. </tr>
7. ...
8. </table>

为什么要添加标题？

标题（caption）为你的表格提供一个简单的描述。 对于使用屏幕阅读器的人来说这相当有用。它直接告诉用户这个表格是做什么用的。

1. <table>
2. <caption>Company X webhosting products overview</caption>
3. ...
4. </table>

为何要添加简介（summary）?

对使用屏幕阅读器的人来说阅读表格是一件非常需要耐心的事，而有时候表格标题只能提供一小点提示。 在他们研究表格数据前给他们一些提示对他们来说会非常有用。 这能为他们节省很多时间。表格内容简介对他们自己花很多时间来读表格获得的信息有用得多。

1. <table summary="Webhosting products overview showing all available packages, what's included and what the monthly cost is with an option to order">
2. <caption>Company X webhosting products overview</caption>
3. ...
4. </table>

CSS部分

现在我们来谈谈表格样式和颜色。我这里有两个例子：

• 第一个例子 的单元格只改变了背景颜色而没有添加背景图片。
• 第二个例子 使用了 背景图片

[这两个例子的颜色都不明显啊…… 仔细看才看得出差别]

为单元格添加样式

下面的代码中边框样式被加粗显示。border-collapse（边框合并）属性被定义成了collapse，这样就清除了单元格之间的间距。

1. table {
2. width:90%;
3. border-top:1px solid #e5eff8;
4. border-right:1px solid #e5eff8;
5. margin:1em auto;
6. border-collapse:collapse;
7. }
8. td {
9. color:#678197;
10. border-bottom:1px solid #e5eff8;
11. border-left:1px solid #e5eff8;
12. padding:.3em 1em;
13. text-align:center;
14. }

为表头添加样式

在下面的CSS代码中我用了一个类来定义单元格交替的颜色变换。不过你也可以 用一些简单的jacascript代码 实现这一效果，以避免添加这些额外的类，从而使代码特别特别的干净。我也为第一列添加了单独的样式，因为这一列需要有不同的样式效果和背景。

例子1的CSS代码

1. tr.odd td {
2. background:#f7fbff
3. }
4. tr.odd .column1 {
5. background:#f4f9fe;
6. }
7. .column1 {
8. background:#f9fcfe;
9. }

例子2的CSS代码

1. tr.odd td,
2. tr.odd .column1 {
3. background:#f4f9fe url(images/background.gif) no-repeat;
4. }
5. .column1 {
6. background:#f9fcfe;
7. }

定义thead和tfoot元素样式

我的表格顶部的表头添加了不同的样式：

1. thead th {
2. background:#f4f9fe;
3. text-align:center;
4. font:bold 1.2em/2em "Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif;
5. color:#66a3d3;
6. }

对于表格底部的样式，我用strong标签重点强调了标题，用em标签强调了价格。

1. tfoot th {
2. background:#f4f9fe;
3. text-align:center;
4. }

下面的代码定义“真正”的表头的样式:

1. tfoot th strong {
2. font:bold 1.2em "Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif;
3. margin:.5em .5em .5em 0;
4. color:#66a3d3;
5. }

下面的代码定义显示价格的em元素的样式:

1. tfoot th em {
2. color:#f03b58;
3. font-weight: bold;
4. font-size: 1.1em;
5. font-style: normal;
6. }

背景图片的制作

在Photoshop里新建一个60乘200大小的图形文件，新建一个图层添加微妙的垂直渐变。 用浅蓝色做背景（这应该是和在CSS里将指定的背景色一样的颜色）并为高光部分选择一个更加明亮的蓝色。当单元格在垂直方向扩展时这个颜色将使背景不显得突兀。按住shift键从下向上拉一个渐变。

再建一个新图层， 选择画笔工具，确保其宽度为1像素。 同样是按住shift键，在图片最顶部和最左侧分别拉一条贯穿的直线。

好了，制作完成！希望您喜欢这个教程