PHP小码农

Appearance

caption 表格标题 ​

<caption> 元素为表格提供标题或说明文字。它是 <table> 的第一个子元素，用于描述表格的内容和用途。本节将介绍 caption 的用法、样式控制和无障碍作用。

前置知识

阅读本节前，建议先了解：tr / th / td

基础概念 ​

<caption> 是表格的标题元素，它必须作为 <table> 的第一个子元素出现。caption 不仅是视觉上的表格标题，还扮演着重要的无障碍角色——屏幕阅读器会首先朗读 caption 内容，帮助用户理解表格的用途。

每个表格只应有一个 caption。

语法 ​

基本用法 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>caption</title>
  <style>
    table {
      width: 100%;
      border-collapse: collapse;
    }
    th, td {
      border: 1px solid #ddd;
      padding: 10px;
    }
    th {
      background: #f5f5f5;
    }
  </style>
</head>
<body>
  <h1>caption 基本用法</h1>

  <table>
    <!-- caption 必须是 table 的第一个子元素 -->
    <caption>2024 年度员工考勤统计</caption>

    <thead>
      <tr>
        <th>部门</th>
        <th>平均出勤率</th>
        <th>迟到次数</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>技术部</td>
        <td>98.5%</td>
        <td>12</td>
      </tr>
      <tr>
        <td>市场部</td>
        <td>96.2%</td>
        <td>28</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

详细说明 ​

caption 的位置（caption-side） ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>caption-side</title>
  <style>
    table {
      width: 100%;
      border-collapse: collapse;
      margin: 20px 0;
    }
    th, td {
      border: 1px solid #ddd;
      padding: 10px;
    }

    /* caption 默认在上方（top） */
    .top-caption {
      caption-side: top;
    }

    /* caption 在下方（bottom） */
    .bottom-caption {
      caption-side: bottom;
    }

    caption {
      font-size: 16px;
      font-weight: bold;
      padding: 8px;
      color: #333;
    }
  </style>
</head>
<body>
  <h1>caption 位置</h1>

  <!-- caption 在上方（默认） -->
  <table class="top-caption">
    <caption>表格一：caption 在上方</caption>
    <tr><th>A</th><th>B</th></tr>
    <tr><td>1</td><td>2</td></tr>
  </table>

  <!-- caption 在下方 -->
  <table class="bottom-caption">
    <caption>表格二：caption 在下方</caption>
    <tr><th>X</th><th>Y</th></tr>
    <tr><td>3</td><td>4</td></tr>
  </table>
</body>
</html>
caption-side 值位置说明
top（默认）表格上方最常用
bottom表格下方适合补充说明
left / right左/右侧浏览器支持有限

caption 的 CSS 样式化 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>caption 样式</title>
  <style>
    table {
      width: 100%;
      border-collapse: collapse;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      border-radius: 8px;
      overflow: hidden;
    }
    th, td {
      padding: 12px 16px;
      text-align: left;
      border-bottom: 1px solid #eee;
    }
    th {
      background: #4285f4;
      color: #fff;
    }

    /* caption 样式 */
    caption {
      caption-side: top;
      padding: 16px;
      font-size: 18px;
      font-weight: bold;
      text-align: left;
      color: #333;
      background: #fafafa;
      border-bottom: 1px solid #eee;
    }
  </style>
</head>
<body>
  <h1>caption 样式化</h1>

  <table>
    <caption>产品价格对比表（2024 年最新数据）</caption>
    <thead>
      <tr>
        <th>产品</th>
        <th>标准版</th>
        <th>专业版</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>功能 A</td>
        <td>包含</td>
        <td>包含</td>
      </tr>
      <tr>
        <td>功能 B</td>
        <td>不包含</td>
        <td>包含</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

caption 的无障碍作用 ​

html
<!--
  caption 对无障碍的重要性：

  1. 屏幕阅读器用户：
     - 首先朗读 caption，让用户知道表格的内容
     - 帮助用户决定是否需要浏览表格详情

  2. 与 aria-label 的区别：
     - caption 是可见的，所有用户都能看到
     - aria-label 只在隐藏时使用

  3. 不推荐用其他元素替代 caption：
     错误：在 table 外面用 <h2> 或 <p> 当标题
     正确：使用 <caption>
-->

实战示例 ​

带详细 caption 的数据表 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>详细 caption</title>
  <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      max-width: 700px;
      margin: 0 auto;
      padding: 20px;
    }
    table {
      width: 100%;
      border-collapse: collapse;
    }
    th, td {
      padding: 10px;
      text-align: center;
      border-bottom: 1px solid #eee;
    }
    th { background: #34a853; color: #fff; }
    caption {
      caption-side: top;
      text-align: left;
      padding: 0 0 12px;
    }
    caption strong {
      display: block;
      font-size: 18px;
      margin-bottom: 4px;
    }
    caption span {
      font-size: 14px;
      color: #666;
    }
  </style>
</head>
<body>
  <table>
    <!-- caption 可以包含多个子元素 -->
    <caption>
      <strong>网站月度访问统计</strong>
      <span>数据来源：Google Analytics | 更新时间：2024 年 12 月</span>
    </caption>
    <thead>
      <tr>
        <th>月份</th>
        <th>页面浏览量</th>
        <th>独立访客</th>
        <th>平均停留时间</th>
      </tr>
    </thead>
    <tbody>
      <tr><td>10 月</td><td>125,000</td><td>45,000</td><td>3:42</td></tr>
      <tr><td>11 月</td><td>138,000</td><td>52,000</td><td>3:55</td></tr>
      <tr><td>12 月</td><td>150,000</td><td>58,000</td><td>4:10</td></tr>
    </tbody>
  </table>
</body>
</html>

注意事项 ​

  • <caption> 必须是 <table> 的第一个子元素
  • 每个表格最多只能有一个 <caption>
  • caption 在 <thead> 之前，但在 CSS 中可以视觉上调整位置
  • 不要将 <caption> 替换为表格外的标题或 aria-label

最佳实践 ​

  • 每个数据表格都应提供 <caption>
  • caption 应简洁明了地描述表格的内容
  • 可以在 caption 中包含数据来源、更新时间等补充信息
  • 使用 CSS 美化 caption 的样式
  • caption-side: top 是最常见且推荐的位置

下一节

继续学习：colgroup 与 col

参考链接 ​