HTML 表格表头单元格标签 - <th>

什么是 <th> 标签？

<th> 标签用于定义HTML表格中的表头单元格（table header cell）。表头单元格通常包含表格列或行的标题，与数据单元格（<td>）不同，表头单元格的内容默认会加粗并居中显示。

基本语法

html 
<table>
  <tr>
    <th>姓名</th> <!-- 这是一个表头单元格 -->
    <th>年龄</th> <!-- 这是另一个表头单元格 -->
    <th>职业</th> <!-- 这是第三个表头单元格 -->
  </tr>
  <tr>
    <td>张三</td>
    <td>28</td>
    <td>工程师</td>
  </tr>
</table>

父元素与子元素

父元素

<th> 标签必须作为 <tr>（表格行）元素的子元素。

子元素

<th> 标签可以包含各种HTML内容，包括：

  • 文本
  • 图片
  • 链接
  • 其他HTML元素

属性

基本属性

属性 描述
colspan 规定表头单元格可横跨的列数
rowspan 规定表头单元格可纵跨的行数
align 表头单元格内容的水平对齐方式（left、center、right、justify）
valign 表头单元格内容的垂直对齐方式（top、middle、bottom、baseline）
width 表头单元格的宽度
height 表头单元格的高度
bgcolor 表头单元格的背景颜色
bordercolor 表头单元格边框的颜色
nowrap 禁止表头单元格内容自动换行
scope 定义表头单元格与数据单元格的关联关系（col、row、colgroup、rowgroup）
abbr 表头单元格内容的缩写，用于屏幕阅读器

已废弃的属性

以下属性在HTML5中已被废弃，建议使用CSS替代：

  • align：使用 text-align CSS属性
  • valign：使用 vertical-align CSS属性
  • width：使用 width CSS属性
  • height：使用 height CSS属性
  • bgcolor：使用 background-color CSS属性
  • bordercolor：使用 border-color CSS属性
  • nowrap：使用 white-space: nowrap CSS属性

全局属性

<th> 标签支持所有HTML全局属性，常用的包括：

属性 描述
class 为表头单元格指定类名
id 为表头单元格指定唯一ID
style 内联样式
title 鼠标悬停时显示的提示文本
lang 指定表头单元格内容的语言

重要属性详解

scope属性

scope 属性用于明确表头单元格与数据单元格的关联关系，这对屏幕阅读器等辅助技术非常重要。

值 描述
col 表头单元格关联到当前列的所有数据单元格
row 表头单元格关联到当前行的所有数据单元格
colgroup 表头单元格关联到当前列组的所有数据单元格
rowgroup 表头单元格关联到当前行组的所有数据单元格

示例：

html 
<table>
  <tr>
    <th scope="col">姓名</th> <!-- 关联到整列 -->
    <th scope="col">年龄</th> <!-- 关联到整列 -->
    <th scope="col">职业</th> <!-- 关联到整列 -->
  </tr>
  <tr>
    <th scope="row">张三</th> <!-- 关联到整行 -->
    <td>28</td>
    <td>工程师</td>
  </tr>
  <tr>
    <th scope="row">李四</th> <!-- 关联到整行 -->
    <td>32</td>
    <td>设计师</td>
  </tr>
</table>

abbr属性

abbr 属性用于为表头单元格提供简短的缩写，当表头内容较长时，屏幕阅读器会优先读取缩写内容。

示例：

html 
<table>
  <tr>
    <th scope="col" abbr="姓名">学生姓名</th>
    <th scope="col" abbr="年龄">学生年龄</th>
    <th scope="col" abbr="成绩">数学成绩</th>
  </tr>
  <!-- 数据行 -->
</table>

示例

基本表头使用

html 
<table>
  <tr>
    <th>产品名称</th>
    <th>价格</th>
    <th>库存</th>
  </tr>
  <tr>
    <td>笔记本电脑</td>
    <td>¥5999</td>
    <td>20</td>
  </tr>
  <tr>
    <td>智能手机</td>
    <td>¥3999</td>
    <td>50</td>
  </tr>
</table>

行表头和列表头

html 
<table>
  <tr>
    <th></th> <!-- 空表头 -->
    <th scope="col">2023年</th>
    <th scope="col">2024年</th>
    <th scope="col">2025年</th>
  </tr>
  <tr>
    <th scope="row">销售额</th>
    <td>¥100万</td>
    <td>¥150万</td>
    <td>¥200万</td>
  </tr>
  <tr>
    <th scope="row">利润</th>
    <td>¥20万</td>
    <td>¥30万</td>
    <td>¥40万</td>
  </tr>
</table>

跨列表头

html 
<table>
  <tr>
    <th colspan="3">个人信息</th>
  </tr>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>职业</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>28</td>
    <td>工程师</td>
  </tr>
</table>

跨行表头

html 
<table>
  <tr>
    <th rowspan="2">姓名</th>
    <th colspan="2">联系方式</th>
  </tr>
  <tr>
    <th>电话</th>
    <th>邮箱</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>13800138000</td>
    <td>zhangsan@example.com</td>
  </tr>
</table>

最佳实践

1. 始终使用表头

为表格添加适当的表头，可以提高表格的可读性和可访问性。

2. 使用scope属性

为表头单元格添加 scope 属性，明确表头与数据的关联关系，这对使用屏幕阅读器的用户非常重要。

3. 使用语义化结构

将表头行放在 <thead> 元素中，将数据行放在 <tbody> 元素中，以提高表格的语义化。

4. 避免使用表头样式属性

使用CSS来设置表头的样式，而不是使用HTML属性，这更灵活且符合现代Web开发实践。

5. 保持表头简洁

表头内容应该简洁明了，避免过长的文本。如果需要详细说明，可以使用 title 或 abbr 属性。

浏览器兼容性

<th> 标签在所有现代浏览器中都有良好的支持，包括：

  • Chrome
  • Firefox
  • Safari
  • Edge
  • IE6+

总结

<th> 标签是HTML表格中的表头单元格元素，用于定义表格的列或行标题。通过合理使用 <th> 标签及其属性，可以创建语义化、可访问性良好的表格。记住要使用 scope 属性明确表头与数据的关联关系，使用CSS进行样式设置，并遵循最佳实践来确保表格的质量和可维护性。

最后更新：2026-02-07