首页 > 代码库 > 在表格中，th scope="row"和th scope="col"中的scope属性的用法及意义
在表格中，th scope="row"和th scope="col"中的scope属性的用法及意义
把表头和数据联系起来：scope，id，headers属性
就我用到现在，很多表格要比上面提供的例子复杂的多。让例子复杂一点，我会移去“Company”表头，并且把第一列的数据移到表头单元格里：
<table summary="The number of employees and the foundation year of some imaginary companies."> <caption>Table 1: Company data</caption> <tr> <td></td> <th>Employees</th> <th>Founded</th> </tr> <tr> <th>ACME Inc</th> <td>1000</td> <td>1947</td> </tr> <tr> <th>XYZ Corp</th> <td>2000</td> <td>1973</td> </tr> </table>
在这个表格里，每一个数据单元格都有两个表头。最简单的方法让那些非可视的浏览器理解这个表格，就是为每个表头添加一个scope属性。
<table summary="The number of employees and the foundation year of some imaginary companies."> <caption>Table 1: Company data</caption> <tr> <td></td> <th scope="col">Employees</th> <th scope="col">Founded</th> </tr> <tr> <th scope="row">ACME Inc</th> <td>1000</td> <td>1947</td> </tr> <tr> <th scope="row">XYZ Corp</th> <td>2000</td> <td>1973</td> </tr> </table>
Scope属性同时定义了行的表头和列的表头：
col: 列表头
row: 行表头
在第一行的<th>加上值为col的scope属性，声明他们是下面数据单元格的表头。同样的，给每行的开头<th>加上值为row的scope属性声明他们是右边数据单元格的表头。
Scope属性还有两个值：
colgroup: 定义列组（column group）的表头信息
rowgroup: 定义行组（row group）的表头信息
一个列组是由<colgroup>标签定义的。行组则是由<thead>、<tfoot>和<tbody>定义的。稍后我将会详细介绍它们。
如果你既想要保留“Company”表头，而又想让公司名字作为行表头（row headers）显示，你会怎么做？那样的话，应该使得包含公司名字的单元格同时提供表头和数据信息。也就是说，<td>标签也应该加上scope属性：
<table summary="The number of employees and the foundation year of some imaginary companies."> <caption>Table 1: Company data</caption> <tr> <th scope="col">Company</th> <th scope="col">Employees</th> <th scope="col">Founded</th> </tr> <tr> <td scope="row">ACME Inc</td> <td>1000</td> <td>1947</td> </tr> <tr> <td scope="row">XYZ Corp</td> <td>2000</td> <td>1973</td> </tr> </table>
这样的话可视化浏览器不会默认的把company name显示为表头。所以需要用CSS来修正一下，就刚才那个例子，我使用了下面的CSS：
td[scope] {
font-weight:bold;}
在表格中，th scope="row"和th scope="col"中的scope属性的用法及意义
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。