caption标签必须作为table的第一个子元素且唯一，否则语义失效、屏幕阅读器无法正确播报；其默认居中加粗，可通过caption-side和text-align调整位置与对齐，padding控制间距。

caption 标签必须紧贴

开头，不能放错位置

很多人写完 <table> 先写 <code><tr><th>，再补 <code><caption></caption>，结果标题不显示或语义失效。HTML 规范要求 <caption></caption> 必须是 <table> 的第一个子元素，且只能有一个。 <p>正确结构只有这一种：</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a> <p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p> </div> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <pre class="brush:php;toolbar:false;"></pre> <table> <caption>销售数据汇总（2024 Q1）</caption> <thead><tr> <th>产品</th> <th>销量</th> </tr></thead> <tbody><tr> <td>A</td> <td>120</td> </tr></tbody> </table> <ul><li>放在 <code><thead> 前面 —— 合法且生效 <li>放在 <code><tbody> 里或后面 —— 浏览器会尝试修复，但语义丢失，屏幕阅读器可能跳过 <li>写两个 <code><caption></caption> —— 后一个被忽略，W3C 验证失败

caption 默认居中且加粗，但样式可覆盖

浏览器对 <caption></caption> 有默认样式：display: table-caption、text-align: center、font-weight: bold。它不像 <div> 那样默认块级，也不能直接设 <code>margin 或 padding 来控制上下间距 —— 得用 caption-side 和 text-align 配合调整。

• caption-side: top（默认）或 bottom 控制标题位置
• 想左对齐？写 text-align: left 即可，不用 flex 或 float
• 想加间距？给 <caption></caption> 设 padding，不是给 <table> <li>注意：部分旧版 IE 不支持 <code>caption-side: bottom，如需兼容需测试

caption 是语义关键节点，影响可访问性

屏幕阅读器会把 <caption></caption> 内容当作表格的“名称”播报，比如读作“表格：销售数据汇总（2024 Q1）”。如果删掉或放错位置，视障用户就只剩“表格，3 行 2 列”，完全不知道这是什么表。

• 不要用 <h3></h3> 或 <div> 替代 <code><caption></caption> —— 语义不同，辅助技术不识别
• 标题内容要具体，避免“表格1”“数据表”这种无意义描述
• 如果表格本身已有视觉标题（比如上面一个 <h2></h2>），<caption></caption> 仍建议保留，且可更简略（如“明细”），避免重复

动态插入 caption 时要注意 DOM 顺序

用 JavaScript 创建表格后想加标题？别用 appendChild() 往 <table> 末尾塞 —— 这会让 <code><caption></caption> 变成最后一个子元素，无效。

• 正确做法：用 insertBefore() 插入到第一个子节点前，或用 prepend()
• 示例：table.prepend(captionEl) 安全可靠
• 用 innerHTML 拼接时，确保 <caption></caption> 出现在字符串最开头，紧跟 <table><li>React/Vue 中，只要 JSX/模板里 <code><caption></caption> 是 <table> 的第一个子元素，就没问题 caption 的位置和语义约束比看起来更硬。哪怕只是临时调试加个标题，也得按规范来，否则在无障碍、打印样式、响应式布局里容易出隐性问题。</table>