标签必须紧贴 开始标签后且仅出现一次，用于语义化定义表格标题；错误地置于 或用 模拟会破坏可访问性；可通过 caption-side 和 text-align 调整位置与对齐，但避免 float 或 absolute；复杂表格应配合 aria-describedby 补充说明；漏写会导致屏幕阅读器无法识别标题，务必强制添加。

用 <caption></caption> 标签直接写在 <table> 内部第一行 <p>必须紧贴 <code><table> 开始标签之后，且只能出现一次。浏览器会自动将其渲染在表格上方居中位置（默认样式），这是语义化标记表格标题的唯一标准方式。 <p>常见错误是把它放在 <code><thead> 里、或用 <code><div> + CSS 模拟——这会让屏幕阅读器无法识别为表格标题，也破坏了 HTML5 的语义结构。 <ul><li><code><table> <caption>用户注册统计（2024 Q3）</caption> <thead>... ✅ 正确 <li><code><table> <thead><tr><th colspan="3">用户注册统计（2024 Q3）</th></tr></thead> ❌ 不是标题，只是表头单元格 <li><code><div class="table-title">用户注册统计（2024 Q3）</div> <table>... ❌ 屏幕阅读器完全忽略 <h3>通过 CSS 控制 <code><caption></caption> 位置和对齐方式

默认显示在表格上方居中，但可以用 caption-side 和 text-align 调整。注意：IE8 及更早版本不支持 caption-side: bottom，如需兼容得用 JS 回退。

性能影响极小，但要注意：设置 caption-side: bottom 后，某些辅助技术可能仍按“上方标题”逻辑播报，实际体验需测试。

• 置底：caption { caption-side: bottom; }
• 左对齐：caption { text-align: left; }
• 避免用 float 或 position: absolute —— 会脱离表格上下文，导致语义断裂

配合 scope 和 aria-describedby 增强可访问性

仅靠 <caption></caption> 不足以说明复杂表格的全部含义。当标题信息不足时（比如含缩写、特殊指标），需要补充描述。

PathFinder

一款AI数据处理工具，主要用于AI驱动的销售漏斗分析工具，适合需要提升相关任务效率的用户。

下载

不要用注释或隐藏文本凑数；优先让 <caption></caption> 自身表达完整，再用 aria-describedby 关联额外说明段落。

• 基础可用：<caption>GMV 同比增长率（%）</caption>
• 增强说明：<caption id="cap1">GMV 同比增长率（%）</caption> <p id="desc1" aria-hidden="true">计算方式：(2024Q3 GMV − 2023Q3 GMV) / 2023Q3 GMV</p> <table aria-describedby="desc1"><li> <code>scope 是给 <th> 用的，和 <code><caption></caption> 无关，别混用

  服务端渲染或动态生成时漏写 <caption></caption> 的典型表现

  表格内容正常渲染，但开发者工具里看不到 <caption></caption>，屏幕阅读器跳过整个表格、或报“无标题表格”。这类问题在线上环境常被忽略，直到无障碍审计才暴露。

  React/Vue 中容易因条件渲染疏忽导致缺失；后端模板（如 Jinja、ERB）里未给 caption 字段设默认值也会出问题。

  • 检查点：DOM 中是否存在 <caption></caption> 节点，而非只看视觉是否像标题
  • 自动化检测：Lighthouse 的 “Accessibility > Table has caption” 审计项
  • Vue 示例易错：<caption v-if="showCaption">{{ title }}</caption> —— 若 showCaption 初始为 false，首屏就丢失语义
  表格标题不是装饰，而是表格语义链的第一环。漏掉它，后续所有 scope、headers、列排序提示都可能失效。最稳妥的做法是：只要用了 <table>，就强制写一行 <code><caption></caption>，哪怕内容是占位符 <caption>数据表</caption>。