在表格中,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;}

时间: 2024-10-20 03:41:57

在表格中,th scope="row"和th scope="col"中的scope属性的用法及意义的相关文章

Java -&gt; 把Excel表格中的数据写入数据库与从数据库中读出到本地 (未完善)

写入: private void insertFile(HttpServletRequest request, HttpServletResponse response) throws IOException { String path_member = request.getParameter("path_member"); List list = this.insert("f:/tmp001.xls", "gs_sale_members");

easyui行编辑:利用append row添加行,直接在行中编辑,ajax提交保存

今天工作用到了easyui行编辑,在这里总结一下,不会的同学可以看看,顺便吐槽一下,网上的很多博客都是粘贴复制的,内容很乱 ,而且看不懂,不知道这些粘贴复制的怀的是什么心,不但没用,还影响别人搜索. 呼吁大家在写博客的时候认真一些,别只粘贴复制,至少可以自己运行好了贴上自己的代码和一点感想,对别人用处很大的. 好了,正题开始--> 我用的是easyui 1.4 效果如下: 点击添加按钮,在第二行的位置添加新行,点击单元格输入内容,点保存通过ajax提交. 修改则直接点击单元格修改,点保存提交.

(转)收集:Hibernate中常见问题 No row with the given identifier exists问题的原因及解决

Hibernate中No row with the given identifier exists问题的原因及解决 产生此问题的原因: 有两张表,table1和table2.产生此问题的原因就是table1里做了关联<one-to-one>或者<many-to-one unique="true">(特殊的多对一映射,实际就是一对一)来关联table2.当hibernate查找的时候,table2里的数据没有与table1相匹配的,这样就会报No row with

微软BI 之SSIS 系列 - Execute SQL Task 中的 Single Row 与 Full Result Set 的处理技巧

开篇介绍 Execute SQL Task 这个控件在微软BI ETL 项目中使用的频率还是非常高的,也是大部分入门 SSIS 初学者最早接触到的几个控制流控件. 我们通常使用 Execute SQL Task 的场景包含但不止于以下几类: 在从源端加载数据到 Staging 表之前使用 Execute SQL Task 执行一些 Truncate 操作. 执行一些 Log 的插入,更新操作. ETL 过程中的 Merge 语句操作. XML 的输出处理. 关于如何使用 Execute SQL

Android中利用icodetools工具快速定位App破解中关键点方法

icodetools工具地址:https://github.com/fourbrother/icodetools 一.前言 在前面已经介绍了icodetools工具的实现原理和具体使用规则,关于这部分的知识点还不了解的同学可以去下面两篇文章详细查看:Android中注入代码工具icodetools原理篇,Android中注入代码工具icodetools完善篇.同时这个工具已经放到github上了,感兴趣的同学可以下载尝试各种app的代码注入功能. 那么有了这两篇文章之后,现在我得实际操作了,要动

《Pro SQL Server Internals, 2nd edition》中CHAPTER 7 Designing and Tuning the Indexes中的Clustered Index Design Considerations一节(译)

<Pro SQL Server Internals> 作者: Dmitri Korotkevitch 出版社: Apress出版年: 2016-12-29页数: 804定价: USD 59.99装帧: PaperbackISBN: 9781484219638 索引的设计与调整 索引不可能在任何地方都适用.每个系统都是独特的,并且需要基于工作负载.业务需求和许多其他因素的自己的索引方法.然而,有几个设计考虑和指导方针可以应用在每个系统中. 当我们优化现有系统时也是如此.虽然优化是一个迭代过程,在

阿里规范 - 六、工程结构 - (二)二方库依赖 - 9. 【推荐】所有 pom 文件中的依赖声明放在&lt;dependencies&gt;语句块中,所有版本仲裁放在 &lt;dependencyManagement&gt;语句块中。

9. [推荐]所有 pom 文件中的依赖声明放在<dependencies>语句块中,所有版本仲裁放在 <dependencyManagement>语句块中. 说明:<dependencyManagement>里只是声明版本,并不实现引入,因此子项目需要显式的声明依 赖,version 和 scope 都读取自父 pom.而<dependencies>所有声明在主 pom 的<dependencies>里 的依赖都会自动引入,并默认被所有的子项目

关于js中window.location.href,location.href,parent.location.href,top.location.href的用法

关于js中window.location.href,location.href,parent.location.href,top.location.href的用法 "window.location.href"."location.href"是本页面跳转. "parent.location.href" 是上一层页面跳转. "top.location.href" 是最外层的页面跳转. 举例说明: 如果A,B,C,D都是html,D

PHP接口中的静态变量、常量与类中静态变量、常量的区别

接口: 1 不能够定义静态变量(常量除外) 2 定义的常量 const YOUCONST = VALUE,不能在子类中覆盖,在子类中以 interfaceName::YOUCONST的方式调用 3 不能使用parent::YOUCONST的方式调用接口的常量 类: 1 const 变量可以使用parent::YOUCONST的方式,className::YOUCONST的方式在子类中访问 2 const定义的变量,在子类中可以被覆盖 3 当然在类中可以定义静态成员变量了 示例: <?phpint