caption标签必须直接置于起始标签后且仅出现一次，是表格的语义标题而非普通单元格；其位置由caption-side控制，默认top，影响无障碍访问，空标签会破坏可访问性。

caption 标签必须直接放在 开头，且只能出现一次

很多新手把

放在 里，或者塞到表格末尾，结果浏览器不识别、样式失效、甚至被忽略。它不是普通单元格，而是表格的「元信息容器」，必须紧贴 起始标签之后，且整个表格只能有一个。

正确写法：

2024年Q1销售数据

产品	销量
A款	120

caption 默认居中显示，但对齐方式受 caption-side 控制

默认文字在表格上方居中，但这个行为不是靠 text-align 控制的——那是针对内容的。真正起作用的是 CSS 属性 caption-side，值可以是 top（默认）、bottom、left 或 right。

财经HTML高端海报生成

复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

下载

• caption-side: bottom 把标题移到表格下方（常用于报表脚注）
• caption-side: left 需配合 writing-mode: vertical-lr 才能竖排左对齐，否则可能错位
• 用 text-align 只影响 caption 内部文字对齐，不影响它在表格中的位置

屏幕阅读器依赖 caption，但没文字或空标签会破坏可访问性

辅助技术（如读屏软件）会把 当作表格的唯一语义标题。如果留空、只放空格、或写成  ，等于告诉用户“这张表没有标题”，直接影响无障碍使用。

• 避免： 或
• 推荐用简明描述：比如 各地区用户注册数（按月统计）
• 如果表格本身无意义（如纯布局用），应改用
  ，而非加空 caption

  caption 不参与表格布局计算，但会影响表格整体尺寸

  它不属于 / 的行结构，所以不会影响列宽自动分配。但它会撑开表格外边距区域——尤其当设置了 caption-side: top 且 caption 文字很长时，表格上方留白会变大。

  • 若需控制间距，优先用 margin 而非 padding（caption 是块级元素，padding 对其无效）
  • 长标题换行可用 white-space: normal + max-width，避免横向溢出
  • 不要给 caption 设 display: table-caption——它默认就是这个值，手动设置反而可能触发兼容问题

  实际用的时候，最常被忽略的是 caption 和 table 的位置关系，以及它对可访问性的刚性要求。写完记得用键盘 Tab 切换+读屏工具试一遍，比单纯看渲染效果更可靠。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！