PHP小码农

Appearance

scope 与 headers ​

scope 和 headers 属性用于在复杂表格中建立表头与数据单元格之间的显式关联。本节将介绍这两个属性的高级用法，以及它们在无障碍访问中的重要作用。

前置知识

阅读本节前，建议先了解：合并单元格

基础概念 ​

在简单表格中，表头与数据的关联是隐式的（通过行列位置推断）。但在复杂表格中——特别是有行表头、列表头、合并单元格或嵌套表头时——屏幕阅读器可能无法准确推断关联关系。

scope 属性提供了一种简单的方式来声明表头的作用范围，headers 属性则通过 ID 引用建立更精确的关联。

语法 ​

scope 的四种值 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>scope 值</title>
  <style>
    table { border-collapse: collapse; width: 100%; }
    th, td { border: 1px solid #ddd; padding: 10px; text-align: center; }
    th { background: #4285f4; color: #fff; }
  </style>
</head>
<body>
  <h1>scope 的四种值</h1>

  <table>
    <thead>
      <tr>
        <!-- scope="col"：列标题（最常用） -->
        <th scope="col">姓名</th>
        <th scope="col">语文</th>
        <th scope="col">数学</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <!-- scope="row"：行标题 -->
        <th scope="row">张三</th>
        <td>92</td>
        <td>88</td>
      </tr>
      <tr>
        <th scope="row">李四</th>
        <td>85</td>
        <td>90</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

详细说明 ​

scope 值详解 ​

值含义使用场景
col标题关联整列列表头
row标题关联整行行表头
colgroup标题关联多列组列分组的超级表头
rowgroup标题关联多行组行分组的超级表头

scope="colgroup" 和 scope="rowgroup" ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>scope group</title>
  <style>
    table { border-collapse: collapse; width: 100%; }
    th, td { border: 1px solid #ddd; padding: 10px; text-align: center; }
    th { background: #f5f5f5; }
  </style>
</head>
<body>
  <h1>scope colgroup / rowgroup</h1>

  <table>
    <thead>
      <tr>
        <th></th>
        <!-- scope="colgroup"：此 th 是下面 3 列的分组标题 -->
        <th scope="colgroup" colspan="3">成绩</th>
        <!-- scope="colgroup"：此 th 是下面 2 列的分组标题 -->
        <th scope="colgroup" colspan="2">排名</th>
      </tr>
      <tr>
        <th scope="col">姓名</th>
        <th scope="col">语文</th>
        <th scope="col">数学</th>
        <th scope="col">英语</th>
        <th scope="col">期中</th>
        <th scope="col">期末</th>
      </tr>
    </thead>
    <tbody>
      <!-- scope="rowgroup"：此 th 是下面所有行的分组标题 -->
      <tr>
        <th scope="rowgroup" rowspan="3" style="background: #e3f2fd;">
          一班
        </th>
        <th scope="row">张三</th>
        <td>92</td><td>88</td><td>95</td><td>第 2</td><td>第 1</td>
      </tr>
      <tr>
        <th scope="row">李四</th>
        <td>85</td><td>90</td><td>78</td><td>第 1</td><td>第 3</td>
      </tr>
      <tr>
        <th scope="row">王五</th>
        <td>80</td><td>92</td><td>88</td><td>第 3</td><td>第 2</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

headers 属性 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>headers</title>
  <style>
    table { border-collapse: collapse; width: 100%; }
    th, td { border: 1px solid #ddd; padding: 10px; text-align: center; }
    th { background: #f5f5f5; }
  </style>
</head>
<body>
  <h1>headers 属性</h1>

  <!--
    headers 属性通过 ID 引用来显式关联表头
    每个数据单元格的 headers 列出与其关联的所有表头 ID
  -->

  <table>
    <thead>
      <tr>
        <th id="name" scope="col">姓名</th>
        <th id="chinese" scope="col">语文</th>
        <th id="math" scope="col">数学</th>
        <th id="english" scope="col">英语</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th id="zhang" scope="row">张三</th>
        <td headers="zhang chinese">92</td>
        <td headers="zhang math">88</td>
        <td headers="zhang english">95</td>
      </tr>
      <tr>
        <th id="li" scope="row">李四</th>
        <td headers="li chinese">85</td>
        <td headers="li math">90</td>
        <td headers="li english">78</td>
      </tr>
    </tbody>
  </table>

  <p>
    屏幕阅读器读到张三的 92 分时会说："张三 语文 92"。
  </p>
</body>
</html>

scope vs headers ​

对比项scopeheaders
语法scope="col"headers="id1 id2"
复杂度简单较复杂
适用表格大部分表格非常复杂的表格
浏览器支持所有浏览器所有浏览器
维护成本低（不需要 ID）高（需要维护 ID）

何时使用哪个

  • 大部分表格使用 scope 就够了
  • 只在有非常复杂的表头结构（多层嵌套、不规则合并）时才使用 headers
  • 如果 scope 能清晰表达关联关系，就不要用 headers

实战示例 ​

复杂成绩表 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>复杂成绩表</title>
  <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
    }
    table { width: 100%; border-collapse: collapse; }
    th, td { padding: 10px; text-align: center; border: 1px solid #eee; }
    th { background: #34a853; color: #fff; }
    th[scope="row"] { background: #f5f5f5; color: #333; text-align: left; }
    th[scope="rowgroup"] { background: #e3f2fd; color: #333; }
    caption {
      caption-side: top;
      font-size: 18px;
      font-weight: bold;
      padding-bottom: 12px;
      text-align: center;
    }
  </style>
</head>
<body>
  <table>
    <caption>2024 年期末考试成绩汇总</caption>
    <thead>
      <tr>
        <th></th>
        <th scope="colgroup" colspan="3">期中</th>
        <th scope="colgroup" colspan="3">期末</th>
      </tr>
      <tr>
        <th scope="col">科目</th>
        <th scope="col">最高分</th>
        <th scope="col">平均分</th>
        <th scope="col">及格率</th>
        <th scope="col">最高分</th>
        <th scope="col">平均分</th>
        <th scope="col">及格率</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="rowgroup" rowspan="3">理科</th>
        <th scope="row">数学</th>
        <td>98</td><td>78</td><td>85%</td>
        <td>100</td><td>82</td><td>90%</td>
      </tr>
      <tr>
        <th scope="row">物理</th>
        <td>95</td><td>72</td><td>80%</td>
        <td>97</td><td>75</td><td>88%</td>
      </tr>
      <tr>
        <th scope="row">化学</th>
        <td>92</td><td>70</td><td>82%</td>
        <td>95</td><td>76</td><td>86%</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

注意事项 ​

  • scope 只能用在 <th> 元素上
  • headers 可以用在 <th> 和 <td> 上
  • headers 中的 ID 引用不区分顺序
  • 复杂表格中同时使用 scope 和 headers 是安全的
  • 屏幕阅读器对 scope 的支持比 headers 更好

最佳实践 ​

  • 简单表格：<th scope="col">（列标题）和 <th scope="row">（行标题）
  • 分组表头：使用 scope="colgroup" 和 scope="rowgroup"
  • 复杂关联：使用 headers 属性
  • 始终为每个 <th> 提供 scope 属性
  • 使用 ID 命名保持一致性和可读性

下一节

继续学习：无障碍表格设计

参考链接 ​