caption标签必须直接置于<table>起始标签后且仅出现一次，是表格的语义标题而非普通单元格；其位置由caption-side控制，默认top，影响无障碍访问，空标签会破坏可访问性。
caption 标签必须直接放在 <table> 开头，且只能出现一次
很多新手把 <caption> 放在 <thead> 里，或者塞到表格末尾，结果浏览器不识别、样式失效、甚至被忽略。它不是普通单元格，而是表格的「元信息容器」，必须紧贴 <table> 起始标签之后，且整个表格只能有一个。
正确写法：
<table>
<caption>2024年Q1销售数据</caption>
<thead>
<tr><th>产品</th><th>销量</th></tr>
</thead>
<tbody>
<tr><td>A款</td><td>120</td></tr>
</tbody>
</table>
caption 默认居中显示，但对齐方式受 caption-side 控制
默认文字在表格上方居中，但这个行为不是靠 text-align 控制的——那是针对内容的。真正起作用的是 CSS 属性 caption-side，值可以是 top（默认）、bottom、left 或 right。
-
caption-side: bottom把标题移到表格下方（常用于报表脚注） -
caption-side: left需配合writing-mode: vertical-lr才能竖排左对齐，否则可能错位 - 用
text-align只影响 caption 内部文字对齐，不影响它在表格中的位置
屏幕阅读器依赖 caption，但没文字或空标签会破坏可访问性
辅助技术（如读屏软件）会把 <caption> 当作表格的唯一语义标题。如果留空、只放空格、或写成 <caption> </caption>，等于告诉用户“这张表没有标题”，直接影响无障碍使用。
立即学习“前端免费学习笔记（深入）”；
- 避免：
<caption></caption>或<caption> </caption> - 推荐用简明描述：比如
<caption>各地区用户注册数（按月统计）</caption> - 如果表格本身无意义（如纯布局用），应改用
<div>，而非加空 caption
caption 不参与表格布局计算，但会影响表格整体尺寸
它不属于 <thead>/<tbody> 的行结构，所以不会影响列宽自动分配。但它会撑开表格外边距区域——尤其当设置了 caption-side: top 且 caption 文字很长时，表格上方留白会变大。
- 若需控制间距，优先用
margin而非padding（caption 是块级元素，padding 对其无效） - 长标题换行可用
white-space: normal+max-width，避免横向溢出 - 不要给 caption 设
display: table-caption——它默认就是这个值，手动设置反而可能触发兼容问题
