把表头和数据联系起来: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属性的用法及意义的更多相关文章

  1. HTML表格中<td scope="col">与<td scope="row">的含义

    HTML表格中<td scope="col">与<td scope="row">的含义 表格中 <td scope="c ...

  2. element-ui 中 el-table 根据scope.row行数据变化动态显示行内控件

    加入本行的数据为scope.row,其数据格式为 { "propertyId": 4, "propertyName": "标题", &quo ...

  3. scope.row中属性值展示

    <el-table-column align="> <template slot-scope="scope"> {{ scope.$index } ...

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

    Hibernate中No row with the given identifier exists问题的原因及解决 产生此问题的原因: 有两张表,table1和table2.产生此问题的原因就是tab ...

  5. oracle 查询表中数据行(row)上最后的DML时间

    在这介绍Oracle 10G开始提供的一个伪列ORA_ROWSCN,它又分为两种模式一种是基于block这是默认的模式(块级跟踪):还有一种是基于row上,这种模式只能在建里表时指定ROWDEPEND ...

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

    开篇介绍 Execute SQL Task 这个控件在微软BI ETL 项目中使用的频率还是非常高的,也是大部分入门 SSIS 初学者最早接触到的几个控制流控件. 我们通常使用 Execute SQL ...

  7. Hibernate中常见问题 No row with the given identifier exists问题

    收集:Hibernate中常见问题 No row with the given identifier exists问题的原因及解决 2007年11月21日 15:02:00 eyejava 阅读数:2 ...

  8. jQuery 中使用 DOM 操作节点,对页面中的表格实现增、删、查、改操作

    查看本章节 查看作业目录 需求说明: 在 jQuery 中使用 DOM 操作节点,对页面中的表格实现增.删.查.改操作 点击"增加"超链接时,将表格中的第一条数据添加到表格的末尾 ...

  9. vue中使用分页组件、将从数据库中查询出来的数据分页展示(前后端分离SpringBoot+Vue)

    文章目录 1.看实现的效果 2.前端vue页面核心代码 2.1. 表格代码(表格样式可以去elementui组件库直接调用相应的) 2.2.分页组件代码 2.3 .script中的代码 3.后端核心代 ...

随机推荐

  1. 垃圾陷阱洛谷dp

    题目描述 卡门――农夫约翰极其珍视的一条Holsteins奶牛――已经落了到“垃圾井”中.“垃圾井”是农夫们扔垃圾的地方,它的深度为D(2<=D<=100)英尺. 卡门想把垃圾堆起来,等到 ...

  2. springboot整合rabbitmq

    概述 RabbitMQ是一个开源的消息代理和队列服务器,用来通过普通协议在完全不同的应用之间共享数据,或者简单地将作业队列以便让分布式服务器进行处理. 它现实了AMQP协议,并且遵循Mozilla P ...

  3. CCF-201409-2-画图

    问题描述 试题编号: 201409-2 试题名称: 画图 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 在一个定义了直角坐标系的纸上,画一个(x1,y1)到(x2,y2)的矩 ...

  4. esp8266 SDK开发之编译流程

    最近刚完成自己8266的小项目,已经发布在github上,有兴趣的朋友可以看一下 github地址:esp-ujn 1. 通过MQTT协议与服务器交互 2. 内置HTTP服务器,支持通过浏览器进行参数 ...

  5. Ubuntu TensorFlow 源码 Android Demo的编译运行

    Ubuntu TensorFlow 源码 Android Demo的编译运行 一. 安装 Android 的SDK和NDK SDK 配置 A:下载 国内下载地址选最新的: SDK: https://d ...

  6. NOIP2017普及组解题报告

    刚参加完NOIP2017普及,只考了210,于是心生不爽,写下了这篇解题报告...(逃 第一次写博,望dalao们多多指导啊(膜 第一题score,学完helloworld的人也应该都会吧,之前好多人 ...

  7. 小随笔:利用Shader实现模型爆炸和沙粒化的效果

    0x00 前言 上一篇小随笔<小随笔:利用Shader给斯坦福兔子长毛和实现雪地效果>中,我和大家聊了聊著名的斯坦福兔子和利用geometry shader实现的一些效果.这篇文章继续沿用 ...

  8. Angular之指令Directive系列

    项目筹备近期开启Angular学习,指令比较难理解所以记录备案,推荐Angualr实战学习视频大漠穷秋 Angular实战 一.指令directive概述 指令可以对元素绑定事件监听或者改变DOM结构 ...

  9. 《RabbitMQ Tutorial》译文 第 4 章 路由

    原文来自 RabbitMQ 英文官网的教程(4.Routing),其示例代码采用了 .NET C# 语言. In the previous tutorial we built a simple log ...

  10. JAVA9模块化详解(一)——模块化的定义

    JAVA9模块化详解 前言 java9已经出来有一段时间了,今天向大家介绍一下java9的一个重要特性--模块化.模块化系统的主要目的如下: 更可靠的配置,通过制定明确的类的依赖关系代替以前那种易错的 ...