caption必须是table的第一个子元素且仅出现一次，位置错、多写或外移均导致屏幕阅读器不读、table.caption返回null、dompdf忽略；必须紧贴table开始标签后、首个tr前。

caption 必须是 table 的第一个子元素，且只能出现一次；位置错、多写、外移，标题就“不算数”——屏幕阅读器不读、table.caption 返回 null、dompdf 直接忽略。

caption 必须紧贴 table 开始标签后、首个 tr 前

浏览器和辅助技术靠 DOM 顺序识别归属。一旦 caption 出现在 thead、tbody 或任意 tr 后面，它就脱离表格语义上下文。

• ✅ 正确：...

  2024年Q3销售数据

• ❌ 错误：

  ...

  （caption 不是 thead 的合法子元素）
• ❌ 更隐蔽的错误：

  销售数据

  ...（视觉像标题，但 JS 和屏幕阅读器完全无法关联）

caption-side 控制上下位置，但 left/right 兼容性差

caption-side: top 是默认值，所有浏览器都支持；bottom 在现代浏览器和主流 PDF 渲染器（如 dompdf）中基本可用，但旧版 IE 完全不支持，某些 dompdf 版本对 bottom 渲染有偏移。

• 稳妥写法（推荐）：caption { caption-side: top; text-align: left; }
• 若必须底部显示：优先考虑用 tfoot + 模拟摘要行（语义不同但兼容性更好）
• 避免 caption-side: left 或 right —— Safari 和 Firefox 对其支持不稳定，且 WCAG 不推荐横向标题布局

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

屏幕阅读器按 lang 值切换语音引擎。如果表格主体是中文，而 caption 写的是英文 “Q3 Financial Summary”，不加 lang="en"，就会用中文音调生硬朗读英文词。


使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审
使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。
下载
• ✅ 正确：Q3 Financial Summary
• ❌ 错误：Q3 Financial Summary（依赖页面默认 lang，不可靠）
• ⚠️ 注意：lang 值必须是 BCP 47 标准格式，如 zh-Hans、en-US，不能写 chinese 或 english

不要给 caption 设 display: block 或 position: absolute

caption 是表格专有内建元素，它的布局上下文由表格渲染引擎管理。一旦用 CSS 强行脱离，不仅可能破坏居中逻辑，还会让部分辅助技术丢失其与表格的绑定关系。

• ❌ 危险操作：caption { display: block; width: 100%; } 或 position: absolute; top: -20px;
• ✅ 安全调整：caption { text-align: left; padding: 0.5em 0; font-weight: bold; }
• 关键点：所有样式应围绕文本内容本身，而非重定义其容器行为

最常被忽略的不是怎么写样式，而是 caption 的存在本身决定了表格能否被程序化访问——table.caption 属性只认第一个位置合法的节点，其余全作废。写完记得检查 DOM 结构是否真如规范所求。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！