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

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

caption 标签必须紧贴

开头，不能放错位置

很多人写完 <table> 先写 <tr><th>，再补 <caption>，结果标题不显示或语义失效。HTML 规范要求 <caption> 必须是 <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>

• 放在 <thead> 前面 —— 合法且生效
• 放在 <tbody> 里或后面 —— 浏览器会尝试修复，但语义丢失，屏幕阅读器可能跳过
• 写两个 <caption> —— 后一个被忽略，W3C 验证失败

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

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

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

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

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

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

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

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

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

• 正确做法：用 insertBefore() 插入到第一个子节点前，或用 prepend()
• 示例：table.prepend(captionEl) 安全可靠
• 用 innerHTML 拼接时，确保 <caption> 出现在字符串最开头，紧跟 <table>
• React/Vue 中，只要 JSX/模板里 <caption> 是 <table> 的第一个子元素，就没问题

caption 的位置和语义约束比看起来更硬。哪怕只是临时调试加个标题，也得按规范来，否则在无障碍、打印样式、响应式布局里容易出隐性问题。