HTML <th> 标签

Begindev 编辑部 March 25, 2026

<th> 标签是 HTML 表格中的基础元素，它为标题单元格提供结构和语义意义。

与由 <td> 标签定义的常规数据单元格不同，<th> 单元格专门设计用于表示列标题或行标题。它们通常以粗体显示，用于描述表格内的数据。

正确使用 <th> 标签可以增强表格的无障碍性和可读性，使它们对于用户和搜索引擎都更易于理解。本章将深入探讨 <th> 标签，涵盖其语法、属性以及有效使用的最佳实践。

1. 理解 `<th>` 标签

<th> 标签是 "table header"（表格标题）的缩写，用于定义 HTML 表格中的标题单元格。

它在 <tr>（表格行）标签内部使用，以表明该单元格包含的是标题信息而不是普通数据。浏览器通常会将 <th> 标签内的文本渲染为粗体和居中，尽管这种样式可以通过 CSS 覆盖。

1.1 基本语法

<th> 标签的基本语法非常直观：

<table>
  <tr>
    <th>标题 1</th>
    <th>标题 2</th>
  </tr>
  <tr>
    <td>数据 1</td>
    <td>数据 2</td>
  </tr>
</table>

在这个例子中，“标题 1”和“标题 2”被定义为表格标题，而“数据 1”和“数据 2”是普通的数据单元格。

1.2 隐式关联

<th> 元素隐式地与同一列中的所有数据单元格（<td>）相关联。这种关联对于屏幕阅读器和其他辅助技术至关重要，它们利用这种关系为浏览表格的用户提供上下文。

2. <th> 标签的属性

虽然 <th> 标签本身很简单，但可以通过属性来增强它，以更好地控制其行为和外观。最常用的属性包括 scope、colspan 和 rowspan。

2.1 `scope` 属性 (无障碍性关键)

scope 属性指定了该标题单元格是为哪些单元格提供信息的。这对于无障碍性尤为重要，因为它帮助屏幕阅读器理解表格的结构。

scope 属性可以接受以下值：

col：标题单元格为所在列的其余部分提供标题信息。
row：标题单元格为所在行的其余部分提供标题信息。
colgroup：标题单元格为整个列组提供信息。
rowgroup：标题单元格为整个行组提供信息。

使用 scope="col" 的示例：

<table>
  <tr>
    <th></th> <th scope="col">列 1</th>
    <th scope="col">列 2</th>
  </tr>
  <tr>
    <th scope="row">行 1</th>
    <td>数据 1</td>
    <td>数据 2</td>
  </tr>
  <tr>
    <th scope="row">行 2</th>
    <td>数据 3</td>
    <td>数据 4</td>
  </tr>
</table>

在这个例子中，第一行使用 scope="col" 表明“列 1”和“列 2”是各自列的标题。随后的行使用 scope="row" 表明“行 1”和“行 2”是各自行的标题。

2.2 `colspan` 属性 (跨列)

colspan 属性指定一个标题单元格应该跨越的列数。这对于创建适用于多列的高级标题非常有用。

使用 colspan 的示例：

<table>
  <tr>
    <th colspan="2">合并标题</th>
  </tr>
  <tr>
    <th>标题 1</th>
    <th>标题 2</th>
  </tr>
  <tr>
    <td>数据 1</td>
    <td>数据 2</td>
  </tr>
</table>

在这个例子中，“合并标题”跨越了两列，作为“标题 1”和“标题 2”的上级标题。

2.3 `rowspan` 属性 (跨行)

rowspan 属性指定一个标题单元格应该跨越的行数。这对于创建适用于多行的高级标题非常有用。

使用 rowspan 的示例：

<table>
  <tr>
    <th rowspan="2">合并标题</th>
    <th>标题 1</th>
  </tr>
  <tr>
    <th>标题 2</th>
  </tr>
  <tr>
    <td>数据 1</td>
    <td>数据 2</td>
  </tr>
</table>

在这个例子中，“合并标题”跨越了两行，作为“标题 1”和“标题 2”的共同标题。

3. `<th>` 使用最佳实践

为所有标题单元格使用 <th>：始终使用 <th> 标签来表示标题，而不要试图把普通的 <td> 单元格样式化成标题的样子。这确保了正确的语义和无障碍性。
使用 scope 属性：明确定义每个标题单元格的范围。这对于具有多级标题的复杂表格尤为重要。
保持标题简洁：标题文本应简短且具有描述性，为相应列或行中的数据提供清晰的标签。
使用 CSS 进行样式设计：虽然浏览器为 <th> 提供了默认样式（粗体和居中），但最好使用 CSS 来控制表格的外观。这允许你创建一致且视觉上吸引人的设计。
逻辑地构建表格：以逻辑和直观的方式组织表格，使用清晰的标题和数据。这使用户更容易理解表格中呈现的信息。

4. 实战示例与演示

让我们看一些在不同场景下使用 <th> 标签的实际例子。

4.1 示例 1：带列标题的简单表格

展示一个带有产品信息的简单表格。

<table>
  <tr>
    <th scope="col">产品</th>
    <th scope="col">价格</th>
    <th scope="col">数量</th>
  </tr>
  <tr>
    <td>笔记本电脑</td>
    <td>$1200</td>
    <td>10</td>
  </tr>
  <tr>
    <td>鼠标</td>
    <td>$25</td>
    <td>50</td>
  </tr>
</table>

4.2 示例 2：带行标题的表格

展示一个带有学生成绩的表格，包含行标题。

<table>
  <tr>
    <th></th>
    <th scope="col">测验 1</th>
    <th scope="col">测验 2</th>
    <th scope="col">期末考</th>
  </tr>
  <tr>
    <th scope="row">爱丽丝</th>
    <td>90</td>
    <td>85</td>
    <td>95</td>
  </tr>
  <tr>
    <th scope="row">鲍勃</th>
    <td>75</td>
    <td>80</td>
    <td>85</td>
  </tr>
</table>

4.3 示例 3：带合并标题的表格

展示一个使用 colspan 和 rowspan 属性的复杂表格。

<table>
  <tr>
    <th colspan="2">个人信息</th>
    <th colspan="2">联系方式</th>
  </tr>
  <tr>
    <th scope="col">名</th>
    <th scope="col">姓</th>
    <th scope="col">邮箱</th>
    <th scope="col">电话</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>john.doe@example.com</td>
    <td>555-1234</td>
  </tr>
</table>

1. 理解 <th> 标签