CAPTION标签设置表格标题的HTML文档结构说明

CAPTION标签必须作为table的首个且唯一直接子元素，紧贴在<table>开始标签后、首个<tr>前；每个语义独立的表格都需独立CAPTION，内容须准确具体并避免交互控件。

CAPTION 标签必须直接放在

开头内部

CAPTION 不是表格的子元素，而是表格的「首个且唯一允许的直接子元素」。它必须紧贴在 <table> 开始标签之后、第一个 <tr> 之前，否则解析行为不可靠。

常见错误是把它放到 <thead> 里，或用 <div> 包裹后塞进表格顶部——这些写法会让屏幕阅读器忽略标题，也违反 HTML5 规范。

• <table><caption>销售数据</caption><tr>...</tr></table> ✅ 正确
• <table><thead><caption>...</caption></thead> ❌ 无效，CAPTION 不能嵌套在任何其他标签内
• <table><div><caption>...</caption></div> ❌ CAPTION 必须是 <table> 的直接子节点

CAPTION 的语义作用远大于视觉效果

它不只是“给表格加个标题”，而是为辅助技术（如读屏软件）提供结构化上下文。没有 CAPTION 的表格，在无障碍测试中会被标记为「缺少描述性标题」。

浏览器默认把 CAPTION 渲染在表格上方居中，但它的位置可通过 CSS 的 caption-side 控制（支持 top / bottom，部分浏览器还支持 left / right）。

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

• <caption style="caption-side: bottom;">数据截至2024年9月</caption>
• 不要用 <h3> 或 <p> 替代 CAPTION：它们不被识别为表格标题语义
• 一个 <table> 只能有一个 CAPTION；重复添加会被忽略

多表嵌套时，每个

都需要独立 CAPTION

嵌套表格很常见（比如用表格做邮件模板布局），但每个 <table> 都应有自己明确的 CAPTION，不能只给外层加一个。

否则内层表格对辅助技术来说就是「无名实体」，尤其当内容逻辑独立（如主表是订单汇总，内层表是商品明细）时，缺失标题会导致信息断层。

• 外层 <table><caption>订单总览</caption>...</table>
• 内层 <table><caption>商品明细列表</caption>...</table>
• 如果内层只是纯装饰性表格（如用于对齐的空格占位），应加 <caption><span aria-hidden="true">装饰用</span></caption> 并配合 role="presentation" 显式声明其非语义性

CAPTION 内容长度和可访问性注意事项

标题不宜过长，但必须准确概括表格核心目的。避免模糊词如「数据表」「信息汇总」，优先使用具体业务语义，例如「2024年Q3华东区销售额（按城市分）」。

如果标题含单位、时间范围或数据状态，建议直接写入 CAPTION 文本，而不是靠注释或外部说明补充。

• ✅ <caption>用户注册来源统计（2024-01 至 2024-09）</caption>
• ❌ <caption>来源统计</caption>（缺少时间范围，上下文缺失）
• ⚠️ 避免在 CAPTION 中放交互控件（如按钮、链接），会干扰读屏顺序；如有必要，应移至表格外部并用 aria-describedby 关联

表格标题这件事，表面看只是加一行标签，实际牵扯到语义结构、无障碍支持、CSS 渲染规则和嵌套逻辑。最容易被忽略的是：CAPTION 必须是 table 的直接子节点，且每个独立语义表格都得配一个——不是“写了就行”，而是“写对位置、写准含义、写全必要上下文”。