figure 和 table 不应混用，除非表格作为独立图元被引用；table 应直接配 caption，figure 套 table 仅适用于承担图元角色的汇总表等特殊场景。

学术网页里 figure 和 table 该不该混用？ 学术类网页中，figure 和 table 是两类语义完全不同的容器：前者表示「可抽离的独立媒体单元」，后者表示「结构化数据关系」。它们不是风格近似就能互换的标签——表格本身不构成 figure，除非你把它当作一张需要编号引用的「图元」来处理。

• table 必须配 caption（且应为直接子元素），这是它的语义核心；而 figure 必须配 figcaption（且只能是首或尾子元素）
• 把一个带 caption 的 table 套进 figure 里，等于给它加了双重语义声明：既说“这是结构化数据”，又说“这是一张可抽离的图”——逻辑冲突，读屏器可能忽略 caption 或误判上下文
• 真正需要编号引用的表格（如“表3.1：实验参数对照”），应直接用 table + caption，再靠 CSS 控制编号样式（例如用 counter-increment 自动编号）

什么时候 table 才该放进 figure？ 只有一种情况：你想把这张表格当作「图表级内容」来独立引用，且它在文档中确实承担图元角色（比如论文附录里的统计汇总表、对比矩阵图、SVG 渲染的流程表）。

• ✅ 正确：

  表A2：2025年各实验室重复实验标准差汇总

  ...

  
  ——此时表格被当作一个整体图元，编号归属 figure，语义统一
• ❌ 错误：

  ...

  用户行为统计

  
  ——caption 和 figcaption 同时存在，浏览器解析优先级模糊，辅助技术可能跳过其中一个
• ⚠️ 注意：table 内部仍需保持完整语义结构（thead/tbody、th 配 scope 或 headers），不能因外层套了 figure 就省略

figure 中嵌套 table 的 CSS 布局要点figure 默认不设 display 类型，table 默认是 block 级，但会撑满父容器宽度。若需控制图文并排或响应式堆叠：

• 不要用 float 或 position: absolute 拉 table 出文档流——破坏可访问性
• 推荐用 display: grid 或 flex 控制 figure 内部布局，例如：

  figure { display: grid; grid-template-columns: 1fr minmax(300px, 50%)); gap: 1em; }

• figcaption 若放在 table 上方，需注意其默认块级渲染会占满整行；可用 text-align: left + margin-bottom: 0.5em 避免视觉压迫感

编号与交叉引用容易踩的坑 学术网页常依赖自动编号和锚点跳转，但 figure 和 table 的编号机制不同：

• figure 编号靠外部 counter（如 counter-reset: figure），figcaption 里写“图3.2”是人工维护还是 JS 注入，必须统一策略
• table 的 caption 无法被 CSS counter() 自动注入编号（除非用 before 伪元素），而 figcaption 可以
• 如果你用 figure 包裹 table 并期望“表3.2”自动编号，得确保：
  • figcaption 内容不含硬编码数字（如“表3.2”），改用“表： 实验参数对照”
  • JS 或 CSS counter 规则作用于 figure，而非 table

复杂点不在怎么写，而在判断：这张表到底属于「数据容器」还是「图元实体」。错判一次，后续所有引用、导出 PDF、读屏播报都会偏移。

HTML Extract

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

下载

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