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 {
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
最新评论