HTML中caption标签给表格添加标题的方法-html教程-PHP中文网

caption 是表格语义结构的强制组成部分，必须紧贴 table 开始标签后且仅一个，位置错、数量多、样式乱或语言未声明均导致 screen reader 读不到、table.caption 返回 null、dompdf 跳过渲染。

html中caption标签给表格添加标题的方法

caption 标签不是“可选装饰”，而是表格语义结构的强制组成部分——位置错、数量多、样式乱，都会让屏幕阅读器读不到、table.caption 属性返回 null、dompdf 直接跳过渲染。

caption 必须紧贴 table 开始标签后，且只能有一个

浏览器和辅助技术依赖 DOM 顺序识别标题归属。一旦 caption 出现在 thead、tbody 或任意 tr 之后，它就不再被视作该表格的标题。

✅ 正确写法：<table> <caption>销售汇总</caption> <thead>... <li>❌ 错误写法：<code><table> <thead></thead> <caption>销售汇总</caption>（dompdf 会忽略） <li>❌ 更隐蔽错误：<code><div class="title">销售汇总</div> + CSS 定位到表格上方（视觉像，语义为零）
⚠️ 注意：table.caption JavaScript 属性只返回第一个且位置合法的 caption 节点；DOM 中有两个或位置非法，这个属性就是 null

caption-side: bottom 在部分环境不生效

caption-side 属性虽支持 top / bottom / left / right，但兼容性有硬限制：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

旧版 IE 完全不支持 bottom 值
dompdf 的 R&OS CPDF 后端仅支持 top 和 bottom，但某些版本对 bottom 渲染偏移异常
left 和 right 在多数现代浏览器中支持有限，且可能破坏表格流式布局
推荐稳妥写法：table caption { caption-side: top; text-align: left; }
若必须底部显示，优先用 tfoot + <th colspan="n"> 模拟摘要行（语义不同但 dompdf 兼容性更好） <h3>不要给 caption 设 display: block 或 position: absolute</h3> <p><code>caption 的默认 display 是 table-caption，这是内建的表格布局上下文。强行覆盖会切断它与表格的语义绑定：
- 设 display: block → 屏幕阅读器可能跳过，table.caption 失效
- 设 position: absolute → 标题脱离表格流，打印或 PDF 渲染时易错位
- 避免 display: none 或 visibility: hidden —— 这等于删除语义
- 如需视觉强化，可用 font-weight: bold、background-color: #f5f5f5、padding: 8px 等安全样式
多语言标题必须显式声明 lang 属性

当表格内容是中文，而 caption 是英文（如 "Q3 Financial Summary"），不加 lang 会导致语音合成器按页面默认语言发音，语义混淆。
- 正确写法：<caption lang="en">Q3 Financial Summary</caption>
- lang 值必须是有效 BCP 47 标签（如 zh-Hans、en-US），不能写 chinese 或 english
- 整表多语言混排时，避免把不同 lang 的文本塞进同一个 caption；应拆分为独立表格，或用 <span lang="xx"></span> 细粒度控制
- WCAG 2.1 明确要求此类场景显式标注
最常被忽略的一点：它不是“看起来像标题就行”，而是表格可编程访问性的基础设施——位置、数量、样式、语言，四个维度只要一个出错，table.caption 就可能失效，无障碍链路就断了。