在表格中,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属性的用法及意义的更多相关文章
- HTML表格中<td scope="col">与<td scope="row">的含义
HTML表格中<td scope="col">与<td scope="row">的含义 表格中 <td scope="c ...
- element-ui 中 el-table 根据scope.row行数据变化动态显示行内控件
加入本行的数据为scope.row,其数据格式为 { "propertyId": 4, "propertyName": "标题", &quo ...
- scope.row中属性值展示
<el-table-column align="> <template slot-scope="scope"> {{ scope.$index } ...
- (转)收集:Hibernate中常见问题 No row with the given identifier exists问题的原因及解决
Hibernate中No row with the given identifier exists问题的原因及解决 产生此问题的原因: 有两张表,table1和table2.产生此问题的原因就是tab ...
- oracle 查询表中数据行(row)上最后的DML时间
在这介绍Oracle 10G开始提供的一个伪列ORA_ROWSCN,它又分为两种模式一种是基于block这是默认的模式(块级跟踪):还有一种是基于row上,这种模式只能在建里表时指定ROWDEPEND ...
- 微软BI 之SSIS 系列 - Execute SQL Task 中的 Single Row 与 Full Result Set 的处理技巧
开篇介绍 Execute SQL Task 这个控件在微软BI ETL 项目中使用的频率还是非常高的,也是大部分入门 SSIS 初学者最早接触到的几个控制流控件. 我们通常使用 Execute SQL ...
- Hibernate中常见问题 No row with the given identifier exists问题
收集:Hibernate中常见问题 No row with the given identifier exists问题的原因及解决 2007年11月21日 15:02:00 eyejava 阅读数:2 ...
- jQuery 中使用 DOM 操作节点,对页面中的表格实现增、删、查、改操作
查看本章节 查看作业目录 需求说明: 在 jQuery 中使用 DOM 操作节点,对页面中的表格实现增.删.查.改操作 点击"增加"超链接时,将表格中的第一条数据添加到表格的末尾 ...
- vue中使用分页组件、将从数据库中查询出来的数据分页展示(前后端分离SpringBoot+Vue)
文章目录 1.看实现的效果 2.前端vue页面核心代码 2.1. 表格代码(表格样式可以去elementui组件库直接调用相应的) 2.2.分页组件代码 2.3 .script中的代码 3.后端核心代 ...
随机推荐
- Just for 面试
ZOJ题目分类 初学者题: 1001 1037 1048 1049 1051 1067 1115 1151 1201 1205 1216 1240 1241 1242 1251 1292 1331 1 ...
- Scala入门系列(五):面向对象之类
定义类 // 定义类,包含field以及method class HelloWorld { private var name = "Leo" def sayHello() { pr ...
- HITCON-Training-master 部分 Writeup(12月11更新)
HITCON-Training-master Writeup 0x01.lab3 首先checksec一下,发现连NX保护都没开,结合题目提示ret2sc,确定可以使用shellcode得到权限. I ...
- codeforces #447 894A QAQ 894B Ralph And His Magic Field 894C Marco and GCD Sequence
A.QAQ 题目大意:从给定的字符串中找出QAQ的个数,三个字母的位置可以不连续 思路:暴力求解,先找到A的位置,往前扫,往后扫寻找Q的个数q1,q2,然 后相乘得到q1*q2,这就是这个A能够找到的 ...
- svn 如果遇到an unversioned directory of the same name already exists的解决办法
svn 如果遇到an unversioned directory of the same name already exists的解决办法 一般这种情况是因为,在一个已经存在的文件夹里做SVN che ...
- Akka(41): Http:DBTable-rows streaming - 数据库表行交换
在前面一篇讨论里我们介绍了通过http进行文件的交换.因为文件内容是以一堆bytes来表示的,而http消息的数据部分也是byte类型的,所以我们可以直接用Source[ByteString,_]来读 ...
- 数据库文件*.sdf文件定时备份,但是大小的增量在不断增长的问题排查
在某项目上,使用SQL Server数据库,现场反馈每天定时备份数据库文件,每天的数据量是400多个申请单的量.之前每天增长量是50M,但是后来两天增长量是80M,每天的数据量差不多. 到底从什么地方 ...
- Tomcat 源码分析(一)——启动与生命周期组件
写在前面的话:读Tomcat源码也有段时间了,大领悟谈不上.一些小心得记录下来,供大家参考相护学习. 一.启动流程 Tomcat启动首先需要熟悉的是它的启动流程.和初学者第一天开始写Hello Wor ...
- WPF 外发光效果
WPF的滤镜效果,目前框架自带的只有BlurEffect和DropShadowEffect两种.DropShadowEffect为投影效果,只能显示黑灰颜色的效果,如果想让一个边框达到别的颜色的滤镜效 ...
- C#将dataGridView中显示的数据导出到Excel(大数据量超有用版)
开发中非常多情况下须要将dataGridView控件中显示的数据结果以Excel或者Word的形式导出来,本例就来实现这个功能. 因为从数据库中查找出某些数据列可能不是必需显示出来,在dataGrid ...