应使用 <caption> 标签为表格添加顶部说明文字，它必须是 <table> 的第一个子元素，语义正确且支持可访问性；错误做法包括置于表外、用 CSS 定位或滥用已废弃的 align 属性。
表格上方文字用 <caption> 标签最规范
HTML 原生就支持在表格顶部加说明文字，直接用 <caption> 标签，它必须是 <table> 的第一个子元素。浏览器默认把它渲染在表格上方居中位置，语义正确、屏幕阅读器能识别，比手动塞 <p> 或 <div> 更可靠。
常见错误是把文字写在 <table> 外面，或者用 CSS 强行定位——这样会破坏表格结构语义，也影响可访问性。
-
<caption>只能出现一次，且必须紧贴<table>开始标签后 - 默认居中对齐，如需左对齐，加 CSS：
caption { text-align: left; } - 不支持嵌套表格或复杂布局，纯文本或简单内联元素（如
<strong>）即可
<table border="1">
<caption>2024 年 Q1 销售数据汇总（单位：万元）</caption>
<thead>
<tr><th>地区</th><th>销售额</th></tr>
</thead>
<tbody>
<tr><td>华东</td><td>128.5</td></tr>
</tbody>
</table>
如果不用 <caption>，<div> + CSS 定位容易出问题
有人习惯在 <table> 外面加一个 <div> 写说明，再用 CSS 控制间距。这看似自由，但隐患不少：
- 语义断裂：辅助技术无法把这段文字和表格关联起来
- 打印时可能错位（尤其分页处）
- 响应式缩放时文字和表格对不齐，特别是设置了
table-layout: fixed的表格 - 需要额外写 CSS（比如
margin-bottom），而<caption>默认就有合理间距
真要脱离 <caption>，至少给容器加 role="region" 和 aria-labelledby 指向表格 ID，但没必要——<caption> 就是为此设计的。
立即学习“前端免费学习笔记（深入）”；
<caption> 的 align 属性已废弃，别再用
旧教程里常见 <caption align="left">，这个属性在 HTML5 中已被移除，现代浏览器虽大多还兼容，但 W3C 明确标记为 obsolete。用它会导致 HTML 验证失败，也不保证长期可用。
替代方案只有 CSS：
- 左对齐：
caption { text-align: left; } - 右对齐：
caption { text-align: right; } - 控制垂直距离：
caption { margin-bottom: 0.5em; }（注意：不是padding，因为 caption 自带外边距）
别试图用 style="text-align:left" 写在标签里——内联样式难维护，且违反关注点分离原则。
多表场景下，每个 <table> 必须配独立 <caption>
一个页面有多个表格时，不能共用一段说明文字。每个 <table> 都得有自己的 <caption>，哪怕内容相似。否则语义混乱，JavaScript 查找或自动化测试时会出错。
例如下面这种写法是错的：
<p>用户行为统计（下方两个表格均属此分类）</p> <table>...</table> <table>...</table>
正确做法是：
<table> <caption>用户登录次数统计</caption> ... </table> <table> <caption>用户页面停留时长统计</caption> ... </table>
caption 文字越具体越好，避免“上表”“下表”这类依赖上下文的描述——因为表格顺序可能被 CSS 改变，或被 JS 动态重排。
