caption标签是HTML5中专为表格设计的语义化标题容器，必须作为table的第一个子元素，用于描述整张表格内容，提升可访问性、SEO和可维护性。

caption 标签是 HTML5 中专为表格设计的语义化标题容器，它必须作为

的**第一个子元素**，用于描述整张表格的内容或用途，对可访问性（如屏幕阅读器）、SEO 和代码可维护性都有实际价值。

caption 的基本用法与位置要求

caption 只能直接嵌套在 table 开始标签之后、其他任何表格内容（如 thead、tbody、tr）之前。位置错误会导致 HTML 结构无效，部分浏览器可能忽略或错误渲染。

• ✅ 正确写法：

...

2024年各季度销售数据

❌ 错误写法：...

...

（被解析为普通文本，失去语义）

提升可访问性与用户体验

屏幕阅读器会自动将 caption 内容作为表格的“名称”播报，用户无需额外查找说明文字。例如，当焦点进入表格时，会读出：“2024年各季度销售数据，表格，共4行5列”。这比靠 CSS 隐藏的标题或独立段落更可靠。

• 避免使用纯视觉方式（如
  ）替代 caption
• caption 文本应简洁明确，避免模糊表述（如“数据表”），推荐包含时间、对象、维度等关键信息

样式控制与默认行为

caption 默认居中显示在表格上方，但可通过 CSS 精确控制其外观和位置（包括移到表格下方）：

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

• 设置 caption-side: bottom; 可让标题出现在表格底部
• 支持常用文本样式：font-size、color、text-align、padding 等
• 注意：不要用 display: block; 或浮动破坏其固有表格上下文，否则可能影响可访问性支持

与 aria-labelledby 的配合使用（进阶场景）

当表格结构复杂、或 caption 需要复用已有标题（如页面中已有

），可用 aria-labelledby 指向对应元素 ID，此时 caption 可省略或留空（但仍需保留标签以维持结构）：

<h2 id="sales-summary">2024年度销售汇总分析</h2><br>

区域	Q1	Q2

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