用标准的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)?

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

  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键,在图片最顶部和最左侧分别拉一条贯穿的直线。

好了,制作完成!希望您喜欢这个教程

 

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

你可能感兴趣的:(css)