把表头和数据联系起来:scope,id,headers属性 就我用到现在,很多表格要比上面提供的例子复杂的多。让例子复杂一点,我会移去“Company”表头,并且把第一列的数据移到表头单元格里:
Employees | Founded | |
---|---|---|
ACME Inc | 1000 | 1947 |
XYZ Corp | 2000 | 1973 |
Table 1: Company data Employees Founded ACME Inc 1000 1947 XYZ Corp 2000 1973 在这个表格里,每一个数据单元格都有两个表头。最简单的方法让那些非可视的浏览器理解这个表格,就是为每个表头添加一个scope属性。
Employees | Founded | |
---|---|---|
ACME Inc | 1000 | 1947 |
XYZ Corp | 2000 | 1973 |
Scope属性同时定义了行的表头和列的表头: col: 列表头 row: 行表头 在第一行的加上值为col的scope属性,声明他们是下面数据单元格的表头。同样的,给每行的开头加上值为row的scope属性声明他们是右边数据单元格的表头。 Scope属性还有两个值: colgroup: 定义列组(column group)的表头信息 rowgroup: 定义行组(row group)的表头信息 一个列组是由标签定义的。行组则是由、和定义的。稍后我将会详细介绍它们。 如果你既想要保留“Company”表头,而又想让公司名字作为行表头(row headers)显示,你会怎么做?那样的话,应该使得包含公司名字的单元格同时提供表头和数据信息。也就是说,标签也应该加上scope属性:
Company | Employees | Founded |
---|---|---|
ACME Inc | 1000 | 1947 |
XYZ Corp | 2000 | 1973 |
这样的话可视化浏览器不会默认的把company name显示为表头。所以需要用CSS来修正一下,就刚才那个例子,我使用了下面的CSS: td[scope] { font-weight:bold; } 要注意上面的规则使用了属性选择符,IE是不支持的。而通过添加一个class来样式化表头是个不错的办法