表格标题 caption

为表格提供可读标题，增强语义与可访问性

概念说明

caption 是表格的标题，通常放在表格的第一行，用来解释表格内容。它会被屏幕阅读器优先读取，是提高表格可访问性的关键元素。

常见坑：caption 必须是 table 的第一个子元素（在 colgroup 之前）。一个表格只能有一个 caption，不要用它当装饰标题；需要补充说明时建议配合 aria-describedby。

每个表格最多一个 caption
默认显示在顶部，可通过 CSS 调整位置

基础语法

<table>
  <caption>销售报表（2024 Q2）</caption>
  <tr>
    <td>区域</td>
    <td>金额</td>
  </tr>
</table>

演示

顶部 caption

销售报表（2024 Q2）
区域	金额
华东	¥ 120,000
华南	¥ 98,000

底部 caption（caption-side: bottom）

客户满意度调研（样本 320 份）
评分	占比
5 分	48%
4 分	36%

<table>
  <caption>销售报表（2024 Q2）</caption>
  <tr>
    <th>区域</th>
    <th>金额</th>
  </tr>
  <tr>
    <td>华东</td>
    <td>¥ 120,000</td>
  </tr>
</table>

<table class="caption-bottom">
  <caption>客户满意度调研（样本 320 份）</caption>
  ...
</table>