caption必须是table的第一个子元素,否则被忽略;默认caption-side: top且文字居中,无需额外设置;禁用display: block或position: absolute,否则破坏语义与渲染。

caption 标签本身不支持“浮动”——它不是定位元素,也没有 float 行为。所谓“浮动标题”,实际是误用术语;你真正需要的是让标题稳定显示在表格上方(默认行为),并确保它在视觉和语义上都正确对齐。
caption 必须放在 table 开头,否则就失效
浏览器和辅助技术(如屏幕阅读器)只认位置合法的 caption:它必须是 <table> 的**第一个子元素**,紧贴起始标签之后、任何 <code><thead> 或 <code><tr> 之前。
<ul><li>✅ 正确:<code><table>
<caption>订单汇总</caption>
<thead>...
<li>❌ 错误:<code><table>
<thead>...</thead>
<caption>订单汇总</caption> —— 这个 <code>caption 在 DOM 中会被忽略,table.caption 属性返回 null
<div class="table-title"> 模拟标题 —— 视觉像,但语义为零,SEO 和无障碍全丢
<h3>caption-side: top 是默认值,不用写也能向上对齐</h3>
<p><code>caption-side 控制标题相对于表格的方位(top / bottom / left / right),而“向上对齐”就是它的默认行为。你不需要额外设置 caption-side: top,写了也行,但纯属冗余。- 文字居中对齐也是默认效果,无需
text-align: center - 若要左对齐标题文字,加
text-align: left即可;注意:这不影响标题整体位置,只管内部文字排布 -
caption-side: left或right在部分旧浏览器(如 IE11)和 PDF 渲染引擎(如 dompdf)中兼容性差,慎用
不要给 caption 设 display: block 或 position: absolute
caption 的默认 display 是 table-caption,这是浏览器内建的布局上下文。一旦改成 block 或加 position: absolute,它就脱离表格流,导致:
- 尺寸计算异常(比如 margin 不生效、高度塌陷)
- 屏幕阅读器无法关联该标题与表格
- JavaScript 读取
table.caption返回null - dompdf 等工具直接跳过渲染
最常被忽略的一点:标题不是“看起来像就行”,它的位置、语义、DOM 顺序三者缺一不可。哪怕只错一个字符(比如多了一个空格或换行),某些严格解析器也会拒绝识别。











