必须紧贴开始标签，因为html规范要求其为表格第一个子元素，否则浏览器会移出结构导致显示异常或无障碍失效；每个表格仅允许一个，需用css控制样式，不可嵌套或滥用。
为什么 <caption></caption> 必须紧贴 <table> 开始标签？
<p>因为 HTML 规范强制要求 <code><caption></caption> 是 <table> 的第一个子元素，否则浏览器会自动将其移出表格结构——你写的标题可能突然出现在表格上方空白处，或干脆被忽略。实际开发中常见错误是把 <code><caption></caption> 放在 <thead> 里、或者用 CSS 模拟标题却没写语义化标签，这会让屏幕阅读器无法识别表意，也影响 SEO。
<p>正确位置只有一种：<code><table> 后立即跟 <code><caption></caption>，再跟 <thead> 或 <code><tbody>：
<pre class="brush:php;toolbar:false;"></pre>
<table>
<caption>2024 年各季度销售额（单位：万元）</caption>
<thead><tr>
<th>季度</th>
<th>金额</th>
</tr></thead>
<tbody><tr>
<td>Q1</td>
<td>128</td>
</tr></tbody>
</table>
<h3>
<code><caption></caption> 的对齐和定位靠 CSS，不是属性
老式写法如 <caption align="right"></caption> 已被废弃，现代浏览器不支持。必须用 CSS 控制位置与样式：
-
caption-side控制上下位置：top（默认）或bottom - 水平居中用
text-align: center，左对齐用text-align: left - 若需右对齐且保持语义，别用
float或margin-left: auto，而用text-align: right+caption-side: top - 注意：某些旧版 Safari 对
caption-side: bottom渲染不稳定，建议加display: table-caption显式声明
当表格有多个逻辑分组时，别滥用 <caption></caption>
<caption></caption> 每个 <table> 只能有一个，这是硬性限制。如果你看到“主标题+副标题”需求，常见错误是嵌套两个 <code><caption></caption> —— 浏览器只会渲染第一个，其余被丢弃。
替代方案更实用：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 用
<thead> 中的 <code><th colspan="N"> 做分组说明（适合简单场景） <li>用 <code><div role="region" aria-labelledby="cap-id"> 包裹表格并配 <code><h2 id="cap-id"></h2>（适合复杂报表） - 真要语义化多层标题，应拆分为多个独立
<table>，各自配 <code><caption></caption>无障碍访问下，
<caption></caption>不是可选装饰对使用读屏软件的用户来说，
<caption></caption>是表格的唯一官方“名字”。没有它，用户听到的只是“表格，3 行 2 列”，完全不知内容主题。测试时可用 VoiceOver 或 NVDA 打开页面，听它如何播报表格——如果跳过文字或只读“表格”，大概率是<caption></caption>缺失、位置错误，或被aria-hidden="true"错误遮蔽。容易被忽略的一点：
<caption></caption>文字必须具体。写“数据表”不如写“2024 年用户地域分布统计”，后者才真正起说明作用。
