HTML标题标签如何在数据报表模块中定义子标题

HTML中不存在“子标题标签”，caption是表格唯一且必须的语义化标题容器，须作为table的第一个子元素；需通过caption内换行、figure/figcaption包裹或aria-labelledby关联等方式实现合规副信息展示。

HTML 中没有“子标题标签”这个概念，caption 是表格唯一的、语义化的标题容器，且一个 <table> 只能有一个 <caption>。所谓“子标题”，在数据报表模块中实际是视觉分组或辅助说明需求，不能靠多个 <caption> 实现（第二个会被浏览器忽略，W3C 验证报错）。

用 <caption> 定义主标题（必须且唯一）

它描述整个表格的用途或上下文，比如“2024年华东区销售汇总”。必须作为 <table> 的第一个子元素，位置错误（如塞进 <thead> 或放在 <tbody> 后）会导致语义丢失、屏幕阅读器读不到。

1. 正确写法：<table><caption>主标题文本</caption><thead>…</thead><tbody>…</tbody></table>
2. 不可替代：不能用 <h3>、<div class="title"> 或 title 属性代替，否则无障碍访问失效
3. 默认显示在表格上方居中，可用 caption-side: bottom 移至下方（仅支持 top/bottom）

实现“子标题”效果的合规方式

当需要补充单位、时间范围、数据状态等信息时，应避免硬造“子标题”，改用语义清晰、可访问的组合方案：

1. 在 <caption> 内用标点或换行分隔主副信息（如 <caption>销售汇总<br><small>单位：万元｜数据截至2024-06-30</small></caption>），再用 CSS 控制样式
2. 用 <thead> 中带 scope="colgroup" 的 <th> 标注列组说明（例如跨多列的“线上渠道”“线下渠道”）
3. 在表格上方或下方添加 <p> 或 <aside>，并通过 aria-labelledby 关联到表格（如 <table aria-labelledby="cap-main desc-extra">）
4. 对复杂报表，用 <figure><figcaption> 包裹整个 <table>，此时 <figcaption> 可承担主副标题结构（<figcaption><strong>主标题</strong><small>副说明</small></figcaption>）

避免常见错误

这些做法看似“加了子标题”，实则破坏结构和可访问性：

1. 写两个 <caption> —— 第二个被静默丢弃，验证失败
2. 把 <caption> 塞进 <thead> 或 <tr> 里 —— 浏览器不识别为标题，屏幕阅读器跳过
3. 用 margin-top 或 position: absolute 模拟位置 —— 布局不稳定，打印/导出时消失
4. 给 <caption> 设固定 width 或 float —— 脱离表格流，宽度计算异常

导出与打印场景下的补充处理

<caption> 在浏览器渲染中有效，但多数 Excel 导出库、PDF 生成器不读取它。如需导出时保留标题：

1. 在 JS 导出逻辑中手动插入首行（如 SheetJS 的 aoa 数组第一项）
2. 用 data-caption 属性冗余存储标题文本（如 <table data-caption="主标题｜副说明">），供后端或脚本提取
3. 打印样式中显式启用：@media print { caption { display: table-caption; } }（依赖打印机驱动支持）