zoukankan      html  css  js  c++  java
  • 在表格中,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;}

  • 相关阅读:
    《程序猿面试宝典3》大量错误(50+)纠正表
    STM32定时器的预装载寄存器与影子寄存器之间的关系【转】
    Linux虚拟内存和物理地址的理解【转】
    UNIX系统的显示时间何时会到尽头
    assert函数用法总结【转】
    Sizeof与Strlen的区别【转】
    C语言预处理器命令详解【转】
    C#预处理器指令【转】
    I2C总线信号时序总结【转】
    用状态机实现键盘消抖【转】
  • 原文地址:https://www.cnblogs.com/LChenglong/p/7153190.html
Copyright © 2011-2022 走看看