caption标签是HTML中唯一合法的表格标题容器，必须紧贴table起始标签后、首个tr前；位置错误或替换会导致可访问性失效、DOM断裂及渲染引擎忽略。

caption 标签是 HTML 中唯一合法、语义正确的表格标题容器，必须嵌套在 table 内部且紧贴起始标签之后——放错位置或用其他标签替代，会导致可访问性失效、DOM 结构断裂，甚至被 dompdf 等渲染引擎忽略。

caption 必须放在 table 开始标签后、第一行 tr 前

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

• ✅ 正确位置：<table><caption>销售汇总</caption><thead>...
• ❌ 错误写法：<table><thead>...</thead><caption>销售汇总</caption>（dompdf 会跳过该 caption）
• ❌ 更隐蔽的错误：用 <div class="title"> 包裹文字并 CSS 定位到表格上方——视觉像标题，但语义为零

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

caption-side 属性虽能将标题移到表格下方，但兼容性有硬限制：旧版 IE 完全不支持 bottom 值；dompdf 的 R&OS CPDF 后端也仅支持 top 和 bottom，且某些版本对 bottom 渲染偏移异常。

anything-to-html

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

下载

• 推荐稳妥写法：table caption { caption-side: top; text-align: left; }
• 若必须底部显示，优先用 tfoot + th 模拟摘要行（语义不同但 dompdf 兼容性更好）
• 不要给 caption 设 display: block 或 position: absolute——会破坏其内建的表格布局上下文

多语言标题必须用 lang 属性声明

当表格内容是中文，而 caption 是英文（如 “Q3 Financial Summary”），不加 lang 会导致语音合成器按页面默认语言发音，语义混淆。WCAG 2.1 明确要求此类场景显式标注。

立即学习“前端免费学习笔记（深入）”；

• 正确写法：<caption lang="en">Q3 Financial Summary</caption>
• 若整表多语言混排，避免把不同 lang 的文本塞进同一个 caption；应拆分为独立表格或用 span lang="xx" 细粒度控制
• 注意：lang 值必须是有效 BCP 47 标签（如 zh-Hans、en-US），不能写 chinese 或 english

最常被忽略的一点：caption 不是装饰性元素，它的存在直接影响表格的「可编程访问性」——JavaScript 通过 table.caption 属性读取时，只返回第一个且位置合法的 caption 节点；如果 DOM 里有两个 caption，或位置非法，这个属性就返回 null。