怎样在HTML表格中添加图片说明？CAPTION标签的灵活运用-html教程-PHP中文网

caption标签仅用于table元素，不可用于图片说明；正确方案是figure+figcaption，二者语义归属不同、dom结构要求不同、css控制方式也不同。

怎样在html表格中添加图片说明？caption标签的灵活运用

caption 标签不能直接用于“图片说明”，它只属于 table 元素的语义子元素，专为表格服务。如果你看到某处用 caption 给图片加说明，那基本是误用或混淆。

这是硬性规范，不是建议。caption 的 DOM 父节点必须是 table，浏览器解析时会严格校验。放在 img 外、div 里，甚至 figure 中，都会导致：HTML 验证失败、屏幕阅读器忽略、CSS caption-side 失效。

✅ 正确结构：<table> <caption>销售数据汇总</caption> <tr><td>...</td></tr> </table>
❌ 常见错误：<div> <caption>这张图展示用户增长</caption> <img src="..."> </div> —— 这个 caption 标签根本不会被识别为标题，只是普通未定义标签
⚠️ 注意：一个 table 只能有一个 caption；重复写两个，第二个会被浏览器静默丢弃

真正语义正确、无障碍友好的图片说明方案是 figure + figcaption。它和 caption 功能相似（都是描述性标题），但归属不同：前者归 figure，后者归 table。

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

示例：

<figure>
  @@##@@
  <figcaption>2026年Q2用户地域分布（单位：万人）</figcaption></figure>

两者都支持 CSS，但关键属性不同：

caption 用 caption-side: top | bottom 控制上下位置；figcaption 没有这个属性，靠 text-align 或 flex 布局控制对齐
caption 默认居中、加粗；figcaption 默认无特殊样式，需手动设置 font-weight、margin 等
想让 figcaption 显示在图片下方？确保它放在 figure 末尾，并加 text-align: center
想让 caption 显示在表格下方？写 caption { caption-side: bottom; }，不是 margin-top

管。只要 caption 在 table 最开头，它描述的就是整张表的用途，不管表里有没有图片、有多少图片、图片在哪个单元格。

比如表格用 img 显示图标或缩略图，caption 仍应概括整表内容，如：<caption>各产品线最新版本发布状态（含图标标识）</caption>
不要写成“带图的表格”——这没信息量；也不要试图在 caption 里描述某张图，那是 alt 属性或 figcaption 的职责
如果表格本身结构复杂（比如含多张图+文字混合），caption 更要精准：说明范围（时间/地域）、单位、数据来源等，方便视障用户快速建立上下文

真正容易被忽略的是语义边界：caption 不是“通用标题标签”，它是表格契约的一部分；一旦脱离 table，就失去所有语义价值。别为了省事把它挪去配图片，该用 figure 就用 figure。