是 HTML 中唯一合法的表格字幕标签，必须作为 的第一个子元素，语义上描述整个表格内容，浏览器默认将其居中显示在表格上方。

字幕用 必须放在 内部最开头

HTML 中唯一合法的“字幕”标签是

，但它不是通用文字定位工具，只专属于表格，且必须作为 的第一个子元素。浏览器会自动把它渲染在表格上方居中位置——这就是所谓“置顶显示”的来源。

常见错误是把它丢在

外面，或放在 里，结果完全不生效，甚至被解析为普通文本。

只能直接嵌套在 下，不能套在

或其他容器里

它默认垂直居中对齐表格，水平居中；若需左对齐，加 CSS：caption { text-align: left; }

语义上它描述整个表格内容，不是标题也不是装饰性文字，屏幕阅读器会读出它作为表格说明

想让任意文字“看起来像字幕置顶”？用 CSS 定位更可靠

如果目标只是视觉上把一段文字固定在某个容器顶部（比如视频上方、卡片标题区），

不适用，该用 CSS。

典型做法是给容器设 position: relative，文字用 position: absolute; top: 0; 拉上去。注意：绝对定位会让文字脱离文档流，可能覆盖下面内容，需手动调 z-index 或留出上边距。

• 避免用 float 或 margin-top: -XXpx 模拟，容易破坏布局流
• 响应式场景下，优先考虑 flexbox（如 display: flex; flex-direction: column; + order）或 grid，比绝对定位更健壮
• 若需“粘性置顶”（滚动时始终在视口顶部），用 position: sticky; top: 0;，但需父容器有明确高度或滚动上下文

不支持 colspan/rowspan，对齐和跨列要靠 CSS

本身没有原生属性控制跨列，也不能写 colspan。它天然横跨整个表格宽度。但如果你发现它没占满、错位或换行异常，大概率是表格单元格内容撑开了列宽，或者用了 table-layout: fixed 却没设 宽度。

• 强制等宽列：用

配合 width 属性

文字过长导致

折行？加 CSS：white-space: nowrap; overflow: hidden; text-overflow: ellipsis;

IE8 及更早版本不支持 caption-side: bottom（默认只支持 top），如需底部字幕，得用

+ 样式模拟

别把 、

或

当字幕用

有人搜“HTML 字幕”却误用 （只显示在浏览器标签页）、

（是页面主标题，无表格语义）、或

（是区块容器，不自带置顶行为）。这些标签不会因为名字带“标”就自动置顶显示。

财经HTML高端海报生成

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

下载

尤其注意：视频 标签才是真正的“字幕轨道”，用于 元素，和

完全无关——它不渲染为页面文字，而是由浏览器控制台叠加在视频画面上。

真正需要表格字幕时，老老实实放

里面；其他所有“顶部文字”需求，本质是布局问题，交给 CSS 解决。最容易被忽略的是语义与样式的边界：用对标签是为了可访问性和维护性，不是为了“看起来像”。