HTML 表格标题 <caption> 标签

Begindev 编辑部 March 25, 2026

HTML 中的 <caption> 标签用于为表格提供标题或解释。

关键规则：<caption> 标签必须是 <table> 标签内部的第一个元素。

1. 理解 `<caption>` 标签

<caption> 标签用于定义 HTML 表格的标题或抬头。它提供上下文，帮助用户理解表格的目的。对于无障碍性来说，这是一个重要元素，因为屏幕阅读器会朗读它来宣布表格的内容。

基本语法

<caption> 标签的基本使用语法如下：

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

在这个例子中，“表格标题”将作为表格的标题显示。默认情况下，标题居中显示在表格上方。

2. `<caption>` 标签的位置

<caption> 标签必须紧跟在 <table> 开始标签之后。放在其他任何地方都会导致 HTML 无效。

正确位置示例：

<table>
  <caption>正确的标题位置</caption>
  <tr>
    <th>标题</th>
  </tr>
</table>

错误位置示例：

<table>
  <tr>
    <th>标题</th>
  </tr>
  <caption>错误的标题位置</caption>
</table>

虽然浏览器可能仍然会渲染标题，但错误放置违反了 HTML 标准，并可能导致无障碍工具和其他软件出现问题。

3. 无障碍性考量

<caption> 标签在使残障用户能够访问表格方面发挥着至关重要的作用。屏幕阅读器使用标题来宣布表格的目的和内容，允许用户有效地导航和理解数据。

带有屏幕阅读器文本的示例：

<table>
  <caption>
    月度销售报告 - 2024 年 1 月
    <span class="sr-only">(此表显示了 2024 年 1 月每个产品类别的销售数据。)</span>
  </caption>
  <tr>
    <th>产品类别</th>
    <th>销售额 ($)</th>
  </tr>
</table>

在这个例子中，我们添加了一个带有 "sr-only"（仅限屏幕阅读器）类的 <span> 标签。这允许我们为屏幕阅读器用户提供额外的上下文，而不在页面上直观显示。你需要 CSS 中定义 .sr-only 类来隐藏它。

4. 设置 `<caption>` 标签的样式

虽然 <caption> 标签的默认样式是表格上方的居中对齐文本，但你可以使用 CSS 自定义其外观。

CSS 样式示例：

<!DOCTYPE html>
<html>
<head>
<style>
/* 省略基础表格样式... */
caption {
  caption-side: bottom; /* 将标题移到底部 */
  font-style: italic;   /* 斜体 */
  color: gray;          /* 灰色 */
  text-align: right;    /* 右对齐 */
}
</style>
</head>
<body>
    <table>
      <caption>表 1：员工信息</caption>
      <tr>
        <th>姓名</th>
        <th>职位</th>
      </tr>
    </table>
</body>
</html>

解析：

caption-side: bottom; 将标题移动到表格的底部。
你可以使用各种 CSS 属性进一步自定义 <caption> 的外观，如 font-size, font-weight, background-color 等。

5. 高级用法：复杂标题

标题不仅仅可以包含纯文本。你可以在 <caption> 标签内包含其他 HTML 元素来创建更复杂的标题。

带有链接的示例：

<table>
  <caption>
    销售数据 - <a href="#">查看完整报告</a>
  </caption>
</table>

这个标题包含一个指向完整销售报告的超链接，允许用户轻松访问更详细的信息。

带有图片的示例：

<table>
  <caption>
    产品对比 <img src="logo.png" alt="公司 Logo">
  </caption>
</table>

这里，标题包含了一个图片（如公司 Logo），增加了视觉元素。

6. 实战示例与演示

6.1 示例 1：简单数据表

<table>
  <caption>学生成绩单</caption>
  <tr>
    <th>姓名</th>
    <th>等级</th>
  </tr>
  <tr>
    <td>爱丽丝</td>
    <td>A</td>
  </tr>
</table>

标题“学生成绩单”清晰地表明了表格的用途。

6.2 示例 2：财务数据表

<table>
  <caption>公司季度营收（单位：百万）</caption>
  <tr>
    <th>季度</th>
    <th>营收</th>
  </tr>
</table>

标题提供了关于内容和单位的上下文。

1. 理解 <caption> 标签