HTML caption 标签：表格标题与上下位置设置

HTML <caption> 提供整个表格的标题或简短描述。将其作为 table 内的第一个子元素放置，并使用 CSS caption-side 控制其显示在表格上方还是下方。

区分表格标题与列和行的表头

caption 解释了表格的内容；th 标识特定的列或行。将标题替换为首行的 td 会改变表格标题与数据单元格之间的关系。使用具体的主题和范围，而不仅仅是“表 1”，这样读者在扫描或使用辅助技术导航时可以识别其目的。

每个 table 仅使用一个 caption。在附近文本中添加详细解释、注意事项或数据来源，而不是将表格标题分散到多个 caption 元素中。

完整示例：检查标题位置

将代码保存为 table-caption.html 并在浏览器中打开。这些数字是用于解释表格结构的练习数据。

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>表格标题的位置</title>
  <style>
    body { max-width: 36rem; margin: 1rem auto; padding: 0 1rem; }
    .jb-table-scroll { overflow-x: auto; }
    table { width: 100%; border-collapse: collapse; }
    th, td { padding: 0.6rem; border: 1px solid #8c9399; text-align: left; }
    caption { caption-side: top; text-align: left; padding: 0.6rem 0; font-weight: bold; }
  </style>
</head>
<body>
  <h1>练习数据</h1>
  <div class="jb-table-scroll">
    <table class="jb-table-01">
      <caption>练习资料库中各类别的示例文档数量</caption>
      <thead>
        <tr><th scope="col">类别</th><th scope="col">文档数</th></tr>
      </thead>
      <tbody>
        <tr><th scope="row">HTML</th><td>3</td></tr>
        <tr><th scope="row">CSS</th><td>2</td></tr>
      </tbody>
    </table>
  </div>
</body>
</html>

标题 练习资料库中各类别的示例文档数量 出现在表格上方，随后是 类别 和 文档数 列以及两行数据。caption 解释了表格的用途，而带有 scope 的 th 元素标识了其列和行标题。

将 CSS caption-side: top 更改为 caption-side: bottom 并重新加载页面。标题将移到表格下方，同时在 HTML 中仍保持为第一个子元素。将其改回 top 以恢复原来的位置。使用 text-align 进行水平对齐，而不是使用已废弃的 align 属性。

编写有用的表格标题

caption 是一个可见标题，有助于为表格提供可访问的名称。实际的屏幕阅读器行为取决于浏览器、辅助技术和其他可访问性属性。仅添加标题并不能解决复杂表格中的所有可访问性问题：还需检查表头与数据单元格之间的关系以及阅读顺序。

table 的背景色不会自动应用于 caption，需要时应单独设置标题背景。如果表格是 figure 中唯一的内容，应使用 figcaption 为 figure 提供说明，而不是在 caption 和 figcaption 中重复同一标题。MDN 的 caption 元素参考提供了规则和示例。