HTML 的 <th> 元素

1. 什么是 <th> 元素

<th>（Table Header Cell，表头单元格）是 HTML 表格中用于定义表头单元格的元素。它通常出现在表格的第一行或第一列，用于描述该列或该行数据的含义。

与普通单元格 <td> 不同，<th> 中的文本默认会加粗并居中显示，让读者一眼就能识别出表头信息。

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>城市</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
    <td>北京</td>
  </tr>
</table>

2. <th> 与 <td> 的区别

3. <th> 的常用属性

3.1 scope 属性

scope 属性用于明确表头的作用范围，对屏幕阅读器非常友好：

• scope="col"：表头作用于整列
• scope="row"：表头作用于整行
• scope="colgroup"：表头作用于一组列
• scope="rowgroup"：表头作用于一组行

<table>
  <tr>
    <th scope="col">产品</th>
    <th scope="col">价格</th>
  </tr>
  <tr>
    <th scope="row">键盘</th>
    <td>¥199</td>
  </tr>
</table>

3.2 colspan 与 rowspan

表头单元格同样支持跨列和跨行：

<table>
  <tr>
    <th colspan="2">个人信息</th>
  </tr>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
</table>

4. 自定义表头样式

虽然浏览器默认给 <th> 加粗居中，但实际开发中我们通常会用 CSS 自定义样式：

th {
  background-color: #f2f2f2;
  color: #333;
  padding: 10px 15px;
  text-align: left;
  border-bottom: 2px solid #ddd;
}

5. 无障碍最佳实践

• 始终为 <th> 添加 scope 属性，帮助读屏软件正确朗读表格结构。
• 使用 <caption> 为表格添加标题说明。
• 避免使用 <th> 仅为了视觉加粗效果，应使用 CSS 实现。

<table>
  <caption>2024 年季度销售统计</caption>
  <tr>
    <th scope="col">季度</th>
    <th scope="col">销售额</th>
  </tr>
  <tr>
    <th scope="row">Q1</th>
    <td>¥120 万</td>
  </tr>
</table>

6. 总结

<th> 是 HTML 表格中不可或缺的表头元素，它不仅是视觉上的标题，更承担着语义化与无障碍访问的重要职责。合理使用 scope、colspan 等属性，配合 CSS 自定义样式，能让你的表格既美观又易读。