45. 表头 th 与 caption

本节目标：学会用 th 标记表头单元格，用 caption 添加表格标题，理解 scope 属性的作用。

普通单元格用 td，表头单元格用 th。表头就是每列或每行的标题，告诉读者这列数据是什么意思。

th 元素

th（table header）和 td 用法一样，但语义不同。浏览器默认会让 th 的文字加粗居中。

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>城市</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>28</td>
    <td>北京</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>32</td>
    <td>上海</td>
  </tr>
</table>

姓名	年龄	城市
张三	28	北京
李四	32	上海

第一行是表头，用 th。后面的数据行用 td。

Note

th 的默认样式是加粗居中。这只是浏览器默认行为，实际样式用 CSS 控制。

垂直表头

th 也可以用在每行的开头，作为行标题：

<table>
  <tr>
    <th>语文</th>
    <td>92</td>
    <td>88</td>
  </tr>
  <tr>
    <th>数学</th>
    <td>85</td>
    <td>90</td>
  </tr>
</table>

语文	92	88
数学	85	90

caption 元素：表格标题

caption 为表格提供一个标题，放在 table 开始标签的紧下方：

<table>
  <caption>2024 年第一季度销售数据</caption>
  <tr>
    <th>月份</th>
    <th>销售额</th>
  </tr>
  <tr>
    <td>一月</td>
    <td>120 万</td>
  </tr>
  <tr>
    <td>二月</td>
    <td>150 万</td>
  </tr>
</table>

caption 显示在表格上方（默认），可以用 CSS 的 caption-side 改变位置。

Important

caption 必须是 table 的第一个子元素，放在其他内容之前。

scope 属性：提升可访问性

scope 属性告诉屏幕阅读器这个 th 是行表头还是列表头：

<table>
  <tr>
    <th scope="col">姓名</th>  <!-- 列标题 -->
    <th scope="col">年龄</th>
  </tr>
  <tr>
    <th scope="row">张三</th>  <!-- 行标题 -->
    <td>28</td>
  </tr>
</table>

scope 的可选值：

值	含义
`col`	所在列的标题
`row`	所在行的标题
`colgroup`	多列分组的标题
`rowgroup`	多行分组的标题

Tip

加上 scope 属性后，屏幕阅读器可以一次读出整行或整列的数据，对视力障碍用户非常友好。

完整示例

<table>
  <caption>学生成绩表</caption>
  <tr>
    <th scope="col">姓名</th>
    <th scope="col">语文</th>
    <th scope="col">数学</th>
  </tr>
  <tr>
    <th scope="row">张三</th>
    <td>92</td>
    <td>85</td>
  </tr>
  <tr>
    <th scope="row">李四</th>
    <td>88</td>
    <td>90</td>
  </tr>
</table>

小结

th 标记表头单元格，默认加粗居中
caption 为表格添加标题，放在 table 内部最前面
scope 属性帮助屏幕阅读器理解表格结构
th 可以横向（列标题）也可以纵向（行标题）

下一节，我们学习表格的结构化分组：thead、tbody、tfoot。