HTML表格怎样添加标题？caption标签使用方法

caption必须紧贴<table>开始标签后且为首个子元素，否则语义断裂导致screen reader不读、table.caption返回null、PDF渲染跳过；仅允许一个，不可置于<thead><tbody>内或之后。

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

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

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

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

caption-side 控制标题位置，但 bottom/left/right 兼容性有限

caption 默认在表格上方居中，用 caption-side 可切换方位，但并非所有值都稳：

• top 和 bottom：所有主流浏览器支持，但部分旧版 Safari 对 bottom 渲染偏移异常
• left 和 right：Chrome 117+、Safari 16.4+ 起稳定，Firefox 旧版本不支持
• 稳妥写法（兼容性优先）：table caption { caption-side: top; text-align: left; }
• 若必须底部显示，优先考虑用 <tfoot><tr><th colspan="N">数据截至2024年9月</th></tr></tfoot> 模拟摘要行（语义不同但 dompdf 兼容性更好）

重置 caption 样式时，禁用 display: block 和 position: absolute

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"> 包裹局部文本

最容易被忽略的是：嵌套表格时，每个 <table> 都需要自己独立的 caption，哪怕只是 <caption>装饰用</caption> 并配合 role="presentation" 显式声明其非语义性——否则内层表格对读屏软件来说就是「无名实体」。