CAPTION标签设置表格标题的HTML文档结构说明
作者：袖梨
2026-07-07
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；重复添加会被忽略
多表嵌套时，每个
嵌套表格很常见（比如用表格做邮件模板布局），但每个 <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关联
