<caption>必须作为<table>的第一个子元素，否则语义失效、屏幕阅读器读不到、SEO也收不到；它须紧贴<table>开始标签后，中间不可插入任何其他标签、注释或空白字符。

<caption> 必须作为 <table> 的第一个子元素，否则语义失效、屏幕阅读器读不到、SEO 也收不到。

为什么<caption>不能塞进<thead>里

很多人写成这样：

<table>
  <thead>
    <caption>错误位置！</caption>
    <tr><th>姓名</th></tr>
  </thead>
</table>

此时 <caption> 只是普通文本，浏览器不识别为表格标题。它必须紧贴 <table> 开始标签后，中间不能插任何其他标签（包括 <thead>、注释、空格换行）。

• 正确位置只有一种：<table><caption>...
• 哪怕只多一个换行符或空格（在 HTML 源码中），某些解析器也可能降级处理
• Vue/React 中动态渲染时，需确保 JSX 或模板中没意外插入空白节点

用caption-side控制标题上下位置

caption-side 必须作用于 <table> 元素，不是 <caption> 本身：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

立即学习“前端免费学习笔记（深入）”；

table {
  caption-side: bottom; /* ✅ 正确 */
}
caption {
  caption-side: bottom; /* ❌ 无效 */
}

该属性只可靠支持 top 和 bottom；left/right 在 Safari 和旧版 Firefox 中行为不一致，不建议用。

• IE8+ 仅支持 top/bottom，且需严格声明 <!DOCTYPE html>
• 别用 margin 或 transform “模拟”底部标题——会破坏可访问性顺序
• 若需居左/居右对齐，用 text-align 控制内容，而非移动整个 <caption>

没有<caption>的表格，辅助技术可能直接跳过

部分屏幕阅读器（如 NVDA + Firefox）遇到无 <caption> 的 <table>，会默认判定为“布局表格”，从而跳过整张表的行列导航。

• 哪怕标题只是占位，也建议写最小化语义：<caption>待加载数据</caption> 或 <caption>空结果集</caption>
• 想视觉隐藏但保留语义？用 visually-hidden 类，而不是删掉 <caption>
• 不要依赖 JS 动态插入 <caption>——DOM 渲染完成前，AT 已完成初始解析

最容易被忽略的不是怎么写 <caption>，而是它和 <thead>、scope 的配合：三者缺一，表格在残障用户面前就等于没标题、没结构、没上下文。