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

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属性表示表头应该如何发挥作用，以及它们是如何与单元格里的数据相关联。

示范代码：

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

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

为什么要添加标题？

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

<table> <caption>Company X webhosting products overview</caption> ... </table>

为何要添加简介（summary）?

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

<table summary="Webhosting  products overview showing all available packages, what's included and  what the monthly cost is with an option to order">

<caption>Company X webhosting products overview</caption>

...

</table>

CSS部分

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



第一个例子 的单元格只改变了背景颜色而没有添加背景图片。
第二个例子 使用了 背景图片
[这两个例子的颜色都不明显啊…… 仔细看才看得出差别]

为单元格添加样式

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

table {

width:90%;

border-top:1px solid #e5eff8;

border-right:1px solid #e5eff8;

margin:1em auto;

border-collapse:collapse;

}

td {

color:#678197;

border-bottom:1px solid #e5eff8;

border-left:1px solid #e5eff8;

padding:.3em 1em;

text-align:center;

}

为表头添加样式

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

例子1的CSS代码

tr.odd td {

background:#f7fbff

}

tr.odd .column1 {

background:#f4f9fe;

}

.column1 {

background:#f9fcfe;

}

例子2的CSS代码

tr.odd td,

tr.odd .column1 {

background:#f4f9fe url(images/background.gif) no-repeat;

}

.column1 {

background:#f9fcfe;

}

定义thead和tfoot元素样式我的表格顶部的表头添加了不同的样式：

thead th {

background:#f4f9fe;

text-align:center;

font:bold 1.2em/2em "Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif;

color:#66a3d3;

}

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

tfoot th {

background:#f4f9fe;

text-align:center;

}

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

tfoot th strong {

font:bold 1.2em "Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif;

margin:.5em .5em .5em 0;

color:#66a3d3;

}

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

tfoot th em {

color:#f03b58;

font-weight: bold;

font-size: 1.1em;

font-style: normal;

}

背景图片的制作

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

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

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

来自：http://blog.benhuoer.com/posts/css_table.html