caption标签必须紧贴开始标签后作为首个且唯一子元素，不可嵌套于等内部，否则导致dom绑定断裂、屏幕阅读器无法识别、可访问性失效。
caption 标签必须直接放在 <table> 开头内部
<p>很多人把 <code><caption></caption> 放在 <thead> 里，或者塞到表格末尾，结果浏览器不识别、屏幕阅读器读不到，甚至样式完全失效。它不是普通单元格，而是表格的“官方标题”，必须作为 <code><table> 的第一个子元素出现。
<p>正确写法只有这一种结构：</p>
<pre class="brush:php;toolbar:false;"></pre>
<table>
<caption>2024 年销售汇总</caption>
<thead><tr>
<th>月份</th>
<th>金额</th>
</tr></thead>
<tbody><tr>
<td>1月</td>
<td>¥120,000</td>
</tr></tbody>
</table>
<ul><li>
<code><caption></caption> 不能嵌套在 <thead>、<code><tbody> 或任意 <code><tr> 里
<li>一个 <code><table> 最多只能有一个 <code><caption></caption>
<caption></caption>，又额外加了 <h2></h2> 在表格上方，语义就重复了，对无障碍访问反而有害caption 文字默认居上且加粗，但 CSS 控制力有限
浏览器对 <caption></caption> 的默认样式是居顶、加粗、字体略大，但它不是 <h1></h1>–<h6></h6>，不能用 text-align: center 直接居中（部分旧版 Safari 会失效），也不能靠 margin 精确控制上下间距。
更稳妥的做法是：
- 用
caption-side: bottom把标题移到表格下方（仅支持 top/bottom，不支持 left/right） - 用
text-align: center+caption-side: top组合确保居中（注意：IE 不支持caption-side） - 避免给
<caption></caption>设定固定width或float—— 它会脱离表格流，导致布局错乱
无障碍访问依赖 caption，别用 div 模拟标题
视障用户依赖屏幕阅读器读取表格结构，<caption></caption> 是唯一被标准识别为“表格标题”的元素。如果用 <div class="table-title"> 替代，JAWS/NVDA 等工具根本不会把它和下面的 <code><table> 关联起来。
<p>实际影响包括：</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8272" title="anything-to-html"><img
src="https://img.php.cn/upload/skill/000/000/081/179195588450431.jpg" alt="anything-to-html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill8272" title="anything-to-html" class="overflowclass">anything-to-html</a>
<p class="overflowclass">将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。</p>
</div>
<a rel="nofollow" href="/xiazai/skill8272" title="anything-to-html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<ul>
<li>用户无法通过快捷键（如 Ctrl+Alt+T）快速跳转到该表格</li>
<li>表格描述缺失，辅助技术可能只报“表格，5 行 3 列”，没上下文</li>
<li>WCAG 2.1 要求所有数据表必须有 <code><caption></caption> 或 aria-label，否则算可访问性缺陷
多表共存时 caption 内容要具体，避免“数据表”这种泛称
页面上有多个表格时，光写“数据表”或“统计信息”毫无意义。屏幕阅读器用户听到一连串“数据表”“数据表”“数据表”，根本分不清哪个是订单、哪个是库存。
应该像这样写：
<caption>华东区 Q1 各城市销售额（单位：万元）</caption><caption>用户注册来源渠道占比（截至 2024-04-15）</caption>- 避免空
<caption></caption>—— 这比没有还糟，会被读作“空白标题”
caption 不是装饰，是表格语义不可分割的一部分。漏掉它，或随便填个占位符，等于主动放弃一部分用户。
