应使用 标签为表格添加顶部说明文字，它必须是 的第一个子元素，语义正确且支持可访问性；错误做法包括置于表外、用 css 定位或滥用已废弃的 align 属性。
表格上方文字用 <caption></caption> 标签最规范
HTML 原生就支持在表格顶部加说明文字，直接用 <caption></caption> 标签，它必须是 <table> 的第一个子元素。浏览器默认把它渲染在表格上方居中位置，语义正确、屏幕阅读器能识别，比手动塞 <code><p></p> 或 <div> 更可靠。
<p>常见错误是把文字写在 <code><table> 外面，或者用 CSS 强行定位——这样会破坏表格结构语义，也影响可访问性。
<ul><li>
<code><caption></caption> 只能出现一次，且必须紧贴 <table> 开始标签后
<li>默认居中对齐，如需左对齐，加 CSS：<code>caption { text-align: left; }
<strong></strong>）即可| 地区 | 销售额 |
|---|---|
| 华东 | 128.5 |
如果不用 <caption></caption>，<div> + CSS 定位容易出问题
<p>有人习惯在 <code><table> 外面加一个 <code><div> 写说明，再用 CSS 控制间距。这看似自由，但隐患不少：
<ul>
<li>语义断裂：辅助技术无法把这段文字和表格关联起来</li>
<li>打印时可能错位（尤其分页处）</li>
<li>响应式缩放时文字和表格对不齐，特别是设置了 <code>table-layout: fixed 的表格
margin-bottom），而 <caption></caption> 默认就有合理间距真要脱离 <caption></caption>，至少给容器加 role="region" 和 aria-labelledby 指向表格 ID，但没必要——<caption></caption> 就是为此设计的。
<caption></caption> 的 align 属性已废弃，别再用
旧教程里常见 <caption align="left"></caption>，这个属性在 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> 必须配独立 <code><caption></caption>
一个页面有多个表格时，不能共用一段说明文字。每个 <table> 都得有自己的 <code><caption></caption>，哪怕内容相似。否则语义混乱，JavaScript 查找或自动化测试时会出错。
例如下面这种写法是错的：
<p>用户行为统计（下方两个表格均属此分类）</p>
正确做法是：
caption 文字越具体越好，避免“上表”“下表”这类依赖上下文的描述——因为表格顺序可能被 CSS 改变，或被 JS 动态重排。
