// 划分逻辑区域是浏览器和屏幕阅读器天然识别 、、 语义边界的最轻量合规方式，不依赖css即可触发辅助技术播报上下文切换；常见错误是将所有行塞入或用colspan做视觉分隔，后者对读屏软件完全不可见。

用 / / 划分逻辑区域

浏览器和屏幕阅读器天然识别 <thead>、<code><tbody>、<code><tfoot> 的语义边界，这是最轻量、最合规的视觉与逻辑隔离方式。它不依赖 CSS，但能触发辅助技术自动播报“表头结束”“数据开始”等上下文切换。 <p>常见错误是把所有行都塞进 <code><tbody>，或只用 <code><tr> + <code>colspan 做视觉分隔——后者对屏幕阅读器完全不可见，用户会误以为整张表是一体的。

• 必须确保每个 <tr> 都在对应区块内，不能跨 <code><thead>/<code><tbody> 边界 <li><code><tfoot> 应放在 <code><tbody> 之后（即使渲染在底部），否则部分旧版读屏软件会跳过 <li>若表格无明确“总计”行，<code><tfoot> 可省略；强行添加空 <code><tr> 反而干扰语义 <h3>用 border-top 和 padding 分隔相邻 <tbody><p>当一张表需表达多个业务子集（如“门诊费用”“手术费用”），仅靠 <code><tbody> 不够直观。此时可在每个 <code><tbody> 上加 <code>border-top 或顶部 padding，形成视觉断层。

  关键点在于：不要用空 <tr> 或 <code><div> 插入分隔线——这会破坏表格行列结构，导致屏幕阅读器读错坐标，也影响键盘导航顺序。 <ul> <li>推荐写法：<code>tbody + tbody { border-top: 2px solid #e0e0e0; }

• 避免 margin-top：表格内部元素对 margin 支持不稳定，尤其在 border-collapse: collapse 下常失效
• 若需强调分组标题，用 <caption></caption> 而非额外 <tr>：每个 <code><tbody> 可配独立 <code><caption></caption>（需配合 display: table-caption 重置）

  多级分组必须拆成独立

  +

  当逻辑分组存在嵌套（例如“住院费用”下再分“药品费”“检查费”“床位费”），硬塞进单张表会导致 headers 属性维护成本爆炸，且屏幕阅读器无法建立清晰归属链。此时唯一健壮解法是拆表。

  这不是“过度设计”，而是 WCAG 2.1 中 1.3.1 Info and Relationships 的直接要求：用户必须能无歧义地判断某单元格属于哪个分组。

  

  html-deploy

  使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

  下载

  • 每个子表用独立 <table>，外层用 <code><section aria-labelledby="id"></section> 包裹
  • <h2 id="id"></h2> 作为分组标题，既提供导航锚点，也供读屏软件播报上下文
  • 禁用 aria-describedby 关联分组说明：实测中易引发重复播报，且无法与键盘导航同步

  避免用 colspan/rowspan 模拟分组标题

  <th colspan="4">住院费用</th> 这类写法在视觉上简洁，但会让屏幕阅读器把该单元格识别为“第1行第1列的表头”，而非“后续3行数据的父级标题”。用户聚焦到第一行数据时，听不到“住院费用”这个上下文。

  更糟的是，如果后续插入新行或调整列数，colspan 值极易出错，且无法通过 CSS 或 JS 动态修正语义关系。

  • 替代方案：用 <caption></caption> 或外层 <section></section> + <h2></h2> 明确声明分组意图
  • 若必须保留单表结构，可用 scope="colgroup" 配合 <colgroup></colgroup>，但兼容性差（Safari 16.4+ 才支持）
  • 永远不要给 <th> 加 <code>role="heading"：这会覆盖原生表格角色，导致行列关系丢失 拆表不是妥协，是让语义落地的必要步骤。最容易被忽略的是：开发者常以为“视觉连续 = 语义连续”，但对屏幕阅读器而言，<section></section> + 独立 <table> 才是真正的“连续可理解”。</table>