标准化——表格
要注意上面的规则使用了属性选择符,IE是不支持的。而通过添加一个class来样式化表头是个不错的办法。 Table 1: Company data Company Employees FoundedACME Inc 1000 1947 XYZ Corp 2000 1973 另一个连接表格数据单元格和表头的方法就是给每一个表头添加一个唯一的ID。然后为下面的数据单元格添加headers属性,这个headers属性值包含用空格分开的各个ID,这些ID代表的表头各自关联到该数据单元格上。这样做很复杂,只是当有超过两个表头的单元格才用。在复杂的和不规则的表格中,scope属性就力不从心了。 为了演示,我修改了一下表格,加上了公司雇员性别及人数: <table summary="The number of employees and the foundation year of some imaginary companies."><caption>Table 1: Company data</caption> <tr> <td rowspan="2"></td> <th colspan="2">Employees</th> <th rowspan="2">Founded</th> </tr> <tr> <th>Men</th> <th>Women</th> </tr> <tr> <th>ACME Inc</th> <td headers="acme employees men">700</td> <td headers="acme employees women">300</td> <td headers="acme founded">1947</td> </tr> <tr> <th>XYZ Corp</th> <td headers="xyz employees men">1200</td> <td headers="xyz employees women">800</td> <td headers="xyz founded">1973</td> </tr> </table> Table 1: Company data Employees Founded Men Women ACME Inc 700 300 1947 XYZ Corp 1200 800 1973 你可以发现,这种方法真的很麻烦,所以如果可能的话,还是尽量用scope属性吧。 跨行和跨列 在以前用表格布局的年代,rowspan属性和colspan属性常被用来让单元格跨几列或跨几行,来布局那些经过整齐切割的图像。这两个属性现在还在用, 因为并没有CSS来控制单元格的跨行和跨列。仔细想想,其实是很有道理的:跨行和跨列示表格结构(structure)的一部分,而不是其表现(presentation)。 列和列组:<col>和<colgroup> HTML提供了<colgroup>和<col>标签来为相关的表格列分组。这样就可以(在一些浏览器中)使用CSS来单独的为列样式化。列组也可以使用scope属性来标明其表头信息。 这就是我要说的关于列和列组的全部。更多信息参考“其他”部分。 行组: <thead>, <tfoot>, 和<tbody> 表格的行可以分组为表头组(<thead>), 表尾(或表注)组(<tfoot>), 然后是一个或多个表身(<tbody>) 。每一个行组必须包含一个或多个表格行。 如果一个表格包含<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来样式化,好的样式可以让表格更加易用。 其他 (编辑:焦作站长网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |