PHP小码农

Appearance

tr / th / td ​

<tr>、<th>、<td> 是构建 HTML 表格的核心元素。本节将深入介绍这三个元素的属性、用法以及 th 的 scope 属性在无障碍访问中的重要作用。

前置知识

阅读本节前，建议先了解：table 基本结构

基础概念 ​

<tr>（Table Row）定义表格中的一行。每行可以包含多个单元格——表头单元格 <th>（Table Header）和数据单元格 <td>（Table Data）。<th> 和 <td> 在结构上功能相似，但 <th> 具有特殊的语义含义：表示该单元格是行或列的标题。

语法 ​

tr 定义表格行 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>tr 元素</title>
</head>
<body>
  <h1>tr 定义行</h1>

  <table border="1">
    <!-- 第一行：表头 -->
    <tr>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
    <!-- 第二行：数据 -->
    <tr>
      <td>张三</td>
      <td>28</td>
    </tr>
    <!-- 第三行：数据 -->
    <tr>
      <td>李四</td>
      <td>32</td>
    </tr>
  </table>
</body>
</html>

th 与 td ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>th 与 td</title>
  <style>
    table { border-collapse: collapse; width: 100%; }
    th, td { border: 1px solid #ddd; padding: 8px; }
    th { background: #f5f5f5; }
  </style>
</head>
<body>
  <h1>th 与 td 的区别</h1>

  <table>
    <tr>
      <th>姓名</th>    <!-- 表头：加粗，居中 -->
      <th>邮箱</th>
    </tr>
    <tr>
      <td>张三</td>    <!-- 数据：正常文字 -->
      <td>zhangsan@example.com</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>lisi@example.com</td>
    </tr>
  </table>

  <p><code>&lt;th&gt;</code> 默认加粗居中，<code>&lt;td&gt;</code> 默认正常显示。</p>
</body>
</html>

详细说明 ​

th 的 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; }
    th { background: #4285f4; color: #fff; }
  </style>
</head>
<body>
  <h1>th 的 scope 属性</h1>

  <table>
    <tr>
      <!-- scope="col"：此 th 是列标题 -->
      <th scope="col">姓名</th>
      <th scope="col">语文</th>
      <th scope="col">数学</th>
      <th scope="col">英语</th>
    </tr>
    <tr>
      <!-- scope="row"：此 th 是行标题 -->
      <th scope="row">张三</th>
      <td>92</td>
      <td>88</td>
      <td>95</td>
    </tr>
    <tr>
      <th scope="row">李四</th>
      <td>85</td>
      <td>90</td>
      <td>78</td>
    </tr>
  </table>

  <p>
    <code>scope</code> 属性帮助屏幕阅读器理解表头与数据的关联关系。
  </p>
</body>
</html>
scope 值含义适用场景
col此 th 是列标题（默认）列表头
row此 th 是行标题行表头
colgroup此 th 跨越多个列列分组表头
rowgroup此 th 跨越多个行行分组表头

th 与 td 的属性对比 ​

属性<th><td>说明
colspan支持支持跨列
rowspan支持支持跨行
scope支持不支持表头关联
headers支持支持显式关联
abbr支持不支持缩写标题

th 与 td 的默认样式 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>默认样式</title>
</head>
<body>
  <h1>th 与 td 的浏览器默认样式</h1>

  <table border="1">
    <tr>
      <th>th 默认加粗</th>
      <th>th 默认居中</th>
    </tr>
    <tr>
      <td>td 默认正常</td>
      <td>td 默认左对齐</td>
    </tr>
  </table>

  <p>
    浏览器默认将 <code>&lt;th&gt;</code> 渲染为 <strong>加粗</strong> 且 <em>居中</em>，
    <code>&lt;td&gt;</code> 渲染为正常文本且左对齐。
    这些样式可以通过 CSS 覆盖。
  </p>
</body>
</html>

行表头与列表头的混合使用 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>行列表头</title>
  <style>
    table { border-collapse: collapse; }
    th, td { border: 1px solid #ddd; padding: 8px 16px; }
    th { background: #f0f0f0; }
  </style>
</head>
<body>
  <h1>行表头与列表头混合</h1>

  <table>
    <tr>
      <th></th>
      <th scope="col">Q1</th>
      <th scope="col">Q2</th>
      <th scope="col">Q3</th>
    </tr>
    <tr>
      <th scope="row">北京</th>
      <td>120</td>
      <td>150</td>
      <td>180</td>
    </tr>
    <tr>
      <th scope="row">上海</th>
      <td>200</td>
      <td>220</td>
      <td>250</td>
    </tr>
    <tr>
      <th scope="row">广州</th>
      <td>80</td>
      <td>100</td>
      <td>130</td>
    </tr>
  </table>
</body>
</html>

实战示例 ​

成绩报告表 ​

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: 700px;
      margin: 0 auto;
      padding: 20px;
    }
    table { width: 100%; border-collapse: collapse; }
    th, td { padding: 10px 14px; text-align: center; border-bottom: 1px solid #eee; }
    th { background: #34a853; color: #fff; }
    th[scope="row"] { background: #f5f5f5; color: #333; width: 25%; text-align: left; }
  </style>
</head>
<body>
  <h1>2024 年第一学期成绩</h1>
  <table>
    <tr>
      <th scope="col">科目</th>
      <th scope="col">期中</th>
      <th scope="col">期末</th>
      <th scope="col">总评</th>
    </tr>
    <tr>
      <th scope="row">语文</th>
      <td>88</td>
      <td>92</td>
      <td>90</td>
    </tr>
    <tr>
      <th scope="row">数学</th>
      <td>95</td>
      <td>93</td>
      <td>94</td>
    </tr>
    <tr>
      <th scope="row">英语</th>
      <td>82</td>
      <td>88</td>
      <td>85</td>
    </tr>
    <tr>
      <th scope="row">物理</th>
      <td>90</td>
      <td>91</td>
      <td>91</td>
    </tr>
  </table>
</body>
</html>

注意事项 ​

  • 每个 <tr> 中 <th> 和 <td> 的数量应保持一致（除非有合并单元格）
  • scope 属性在简单表格中可选，但推荐始终设置
  • <th> 不应仅用于样式目的——如果单元格不是表头，使用 <td>
  • 空的 <th> 表示表格的左上角交叉区域（行列表头混合时）

最佳实践 ​

  • 表头单元格始终使用 <th>，数据单元格使用 <td>
  • 列表头使用 scope="col"，行表头使用 scope="row"
  • 不要为了样式效果（加粗/居中）使用 <th>
  • 使用 CSS 覆盖默认样式，而不是依赖浏览器默认行为
  • 确保 scope 属性正确反映数据的关联关系

下一节

继续学习：caption 表格标题

参考链接 ​