caption标签必须紧贴<table>开始标签后作为首个且唯一子元素，不可嵌套于<thead><tbody>等内部，否则导致DOM绑定断裂、屏幕阅读器无法识别、可访问性失效。
caption 标签必须直接放在 <table> 开头内部
很多人把 <caption> 放在 <thead> 里，或者塞到表格末尾，结果浏览器不识别、屏幕阅读器读不到，甚至样式完全失效。它不是普通单元格，而是表格的“官方标题”，必须作为 <table> 的第一个子元素出现。
正确写法只有这一种结构：
<table>
<caption>2024 年销售汇总</caption>
<thead>
<tr><th>月份</th><th>金额</th></tr>
</thead>
<tbody>
<tr><td>1月</td><td>¥120,000</td></tr>
</tbody>
</table>
-
<caption>不能嵌套在<thead>、<tbody>或任意<tr>里 - 一个
<table>最多只能有一个<caption> - 如果用了
<caption>，又额外加了<h2>在表格上方，语义就重复了，对无障碍访问反而有害
caption 文字默认居上且加粗，但 CSS 控制力有限
浏览器对 <caption> 的默认样式是居顶、加粗、字体略大，但它不是 <h1>–<h6>，不能用 text-align: center 直接居中（部分旧版 Safari 会失效），也不能靠 margin 精确控制上下间距。
更稳妥的做法是：
立即学习“前端免费学习笔记（深入）”；
- 用
caption-side: bottom把标题移到表格下方（仅支持 top/bottom，不支持 left/right） - 用
text-align: center+caption-side: top组合确保居中（注意：IE 不支持caption-side） - 避免给
<caption>设定固定width或float—— 它会脱离表格流，导致布局错乱
无障碍访问依赖 caption，别用 div 模拟标题
视障用户依赖屏幕阅读器读取表格结构，<caption> 是唯一被标准识别为“表格标题”的元素。如果用 <div class="table-title"> 替代，JAWS/NVDA 等工具根本不会把它和下面的 <table> 关联起来。
实际影响包括：
- 用户无法通过快捷键（如 Ctrl+Alt+T）快速跳转到该表格
- 表格描述缺失，辅助技术可能只报“表格，5 行 3 列”，没上下文
- WCAG 2.1 要求所有数据表必须有
<caption>或 aria-label，否则算可访问性缺陷
多表共存时 caption 内容要具体，避免“数据表”这种泛称
页面上有多个表格时，光写“数据表”或“统计信息”毫无意义。屏幕阅读器用户听到一连串“数据表”“数据表”“数据表”，根本分不清哪个是订单、哪个是库存。
应该像这样写：
<caption>华东区 Q1 各城市销售额（单位：万元）</caption><caption>用户注册来源渠道占比（截至 2024-04-15）</caption>- 避免空
<caption></caption>—— 这比没有还糟，会被读作“空白标题”
caption 不是装饰，是表格语义不可分割的一部分。漏掉它，或随便填个占位符，等于主动放弃一部分用户。
