HTML表格标题必须使用标签，且必须作为的第一个子元素置于之前；禁用等非语义标签模拟，可通过caption-side和text-align控制位置与对齐。
caption 元素必须直接放在 table 内部最上方
HTML 表格标题不是用 th 或 h2 模拟的，而是靠专用的 caption 元素——但它位置非常严格：caption 必须是 table 的第一个子元素，否则语义失效，部分屏幕阅读器可能跳过或误读。
常见错误是把它写在 thead 里面、或者放在 table 外面当普通标题，结果浏览器虽然可能渲染出文字，但实际不被识别为表格标题。
-
<table> <caption>销售数据</caption> <thead>...</thead> </table>✅ 正确 -
<table><thead> <caption>销售数据</caption>...</thead></table>❌ 无效，caption不是thead的合法子元素 -
<h3>销售数据</h3> <table>...</table>❌ 无语义关联，不能被辅助技术识别为该表标题
caption 默认居中且不可继承 text-align
caption 在所有主流浏览器中默认水平居中（即使父 table 设置了 text-align: left），这是 CSS 规范定义的特殊行为。想让它左对齐或右对齐，不能靠继承，必须显式设置 caption-side 和 text-align。
注意：caption-side 控制标题位置（上/下），text-align 控制文字对齐方式，两者要配合使用。
立即学习“前端免费学习笔记（深入）”；
- 顶部居左：
caption { caption-side: top; text-align: left; } - 底部居右：
caption { caption-side: bottom; text-align: right; } - 仅设
text-align不设caption-side，可能在某些旧版 Safari 中失效
caption 不支持 colspan 或 rowspan，但可嵌套内联元素
caption 本身不是单元格，所以不能加 colspan、rowspan 属性，也不参与表格网格计算。但它可以包含 strong、em、span 甚至 a（比如链接到数据源说明），这对可访问性和语义表达很有帮助。
例如：
<caption>2024 年 Q1 <strong>华东区</strong>销售额（单位：万元）</caption>
这种写法既保持语义清晰，又便于 CSS 单独样式化关键词；但不要在里面放 div、p 等块级元素——HTML 规范只允许其内容为“短语内容”（phrasing content）。
用 aria-labelledby 替代 caption 的场景
当一个表格需要多个逻辑标题（比如主标题 + 副标题 + 更新时间），或者标题需要复用（多个表格共用同一段说明），caption 就不够用了——它只能有一个，且必须紧贴 table 开始处。
这时更灵活的做法是：把标题写在 table 外部（如 h2 + p），然后用 aria-labelledby 关联：
<h2 id="sales-title">销售数据概览</h2><br><p id="sales-desc">截至 2024-04-15，含退货调整</p><br><table aria-labelledby="sales-title sales-desc">...</table>
注意：aria-labelledby 的值是空格分隔的多个 ID，顺序即朗读顺序；这种方式绕过了 caption 的结构限制，但需确保 ID 唯一且不被动态移除。
真正容易被忽略的是：视觉隐藏的标题（比如用 sr-only 类）如果没通过 aria-labelledby 或 aria-label 显式绑定，屏幕阅读器大概率不会把它和表格关联起来。
