caption标签必须紧贴table开头且唯一，是表格语义核心；display默认为table-caption，左对齐需设display:block；不参与尺寸计算但影响无障碍焦点流。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

caption 标签必须放在 table 开头且紧贴

标签

caption 不是可选的“装饰性元素”，它是表格语义结构的一部分，浏览器和读屏工具依赖它的位置来正确识别标题。如果写在 <thead> 里面、插在 <tr> 之间，或放在 </table> 后面，它就失效了——视觉上可能还显示，但语义丢失，SEO 和无障碍支持都会打折。

正确写法只有一种顺序：

<table>
  <caption>2024 年各城市平均气温（摄氏度）</caption>
  <thead>
    <tr><th>城市</th><th>1月</th><th>7月</th></tr>
  </thead>
  <tbody>
    <tr><td>北京</td><td>-4</td><td>26</td></tr>
  </tbody>
</table>

caption 默认居中且加粗，但样式受限于 display: table-caption

很多人想用 text-align: left 或 margin-left 把标题左对齐，结果无效——因为 <caption> 的默认 display 是 table-caption，它不响应普通块级布局属性。必须显式重置：

• 用 display: block 才能用 text-align、margin 等常规控制
• 若保留 table-caption，只能靠 caption-side: top | bottom 控制上下位置，对齐方式仅支持 left/right（需配合 text-align，但行为不稳定）
• 注意：IE 8–10 对 caption-side 支持差，移动端 Safari 在某些版本里会忽略 text-align 设置

稳妥的左对齐写法：

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

caption {
  display: block;
  text-align: left;
  font-weight: normal;
  margin-bottom: 0.5em;
}

一个 table 只能有一个 caption，不能靠多个 caption 实现副标题

HTML 规范明确禁止在单个 <table> 中出现多个 <caption>。试图这样写：

<table>
  <caption>主标题</caption>
  <caption>副标题（错误！）</caption>
  ...
</table>

会导致第二个 <caption> 被浏览器忽略或解析为普通文本，语义完全断裂。真需要多行标题，应该：

• 用换行符 \n + white-space: pre-line 控制（适合简单换行）
• 在 <caption> 内嵌 <div> 或 <span>，再用 CSS 区分样式（注意：这会让部分读屏器把副标题读成“内联内容”，而非标题的一部分）
• 更推荐方案：把副标题移出 <caption>，放在 <table> 外部并用 aria-labelledby 关联

caption 不参与表格尺寸计算，但会影响可访问性焦点流

视觉上，<caption> 不占表格单元格行列空间，也不影响 <colgroup> 宽度计算。但它在 DOM 顺序和键盘导航中排在表格首位——按 Tab 键进入表格时，焦点会先落在 <caption> 上（如果它可聚焦，比如加了 tabindex="0"），再进表头。

容易被忽略的点：

• 如果 caption 文字过长又没设 max-width 或 overflow，可能撑宽整个表格容器
• 用 JavaScript 动态生成表格时，别漏掉 caption —— insertRow() 和 insertCell() 不处理 caption，得单独用 insertAdjacentHTML('afterbegin', '<caption>...</caption>') 或 appendChild()
• 服务端渲染或模板引擎里（如 Jinja、EJS），caption 很容易被写成字符串拼接，一不小心就漏闭合标签，导致后续 HTML 结构错乱

caption 的核心作用从来不是“让表格看起来有标题”，而是告诉机器“这是表格的正式名称”。写对位置、避开多 caption、留意 display 行为，比加多少样式都关键。