当前位置: 主页 > 网页制作 > CSS > 网页设计:标准化你的表格

网页设计:标准化你的表格

时间:2009-10-13来源:中国IT实验室整理 点击:

 如果一个表格包含<thead>,那么它必须出现在<tfoot>和<tbody>之前。而<tfoot>则必须出现在<tbody>之前。如果没有使用<thead>和<tfoot>,那么<tbody>标签也可以不加(也不是非得不加,随你喜欢了)。一个有行组的表格结构看起来如下:

    <table>

    <thead>

    <tr></tr>

    … 更多表头的行

    </thead>

    <tfoot>

    <tr></tr>

    … 更多表尾的行

    </tfoot>

    <tbody>

    <tr></tr>

    … 第一个<tbody>的行

    </tbody>

    <tbody>

    <tr></tr>

    … 第二个<tbody>的行

    </tbody>

    … 更多的<tbody>

    </table>

    使用行组有以下几个原因:

    这样样式化表头、表尾和表身比较方便,而且独立,不必要给每个标签加样式或class。

    当打印比较长的表格的时候,一些浏览器(比如基于Mozilla的)会在每一页的开头重复表头和表尾的内容,这样阅读打印版本的表格就比较方便。

    区分开表头和表尾也可以使一些浏览器浏览表格的时候,只滚动表身。

    仅为数据表格而写

    本文所写的所有都是关于使用HTML表格来组织和表现数据。如果你还是想用表格来布局,那么上文所述的都没有意义而且用不到。没有summary属性、没有表头、没有<caption>、什么都没有,没有格式,陈旧的布局表格除了<table>,<tr>,<td>什么都可以不要。另外还要承担风险,即如何面对那些非可视的用户代理(UA)。

    优势

    看来要用HTML做一个有语义化的数据表格有很多工作。对于复杂的表格是这样的。有时候基本上是不可能手工写出来的。但是对于简单的表格,那么使用一个<th>加上scope属性就可以了,又快又简单。

    非常明显,语义化的表格对于使用屏幕阅读器或其他辅助技术的浏览者非常有好处。让那些巨大而复杂的表格“听”起来很有意义是非常困难的,所以尽可能的使表格简单。

    另外对于使用可视化浏览器的设计者和用户也是有好处的:一个语义化的表格有大量的接口可以利用CSS来样式化,好的样式可以让表格更加易用。

    其他

    除了本文,还有更多关于数据表格内容。比如这里就没有提到axis属性,并且对于<colgroup>和<col>的描述也不是很深。对于格式化和样式化还有border模型我也没有深究,还缺少一个真正复杂的表格的例子。

 

站长资讯网
.
分页: [1] [2] [3] [4] [5] [6]
TAG: 表格

查看[网页设计:标准化你的表格]所有评论
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码:
关于我们 | 友情链接 | 网址推荐 | 常用资讯 | 网站地图 | RSS | 网站留言