必须用包裹多个独立替代单表多级分组，每个内含和规范，表头用明确范围，仅语义需要时才用rowspan/colspan。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

多级分组表格一旦用单个 <table> 硬塞，视觉上能对齐，语义上就全乱了——屏幕阅读器读不出“这个数字属于哪一块”，CSS 也难精准控制样式范围，后期加排序、导出或响应式适配都会卡住。必须拆，不能修。 <h3>用 <code><section></section> + 独立 <table> 替代视觉分组 <p>别再靠 <code><th colspan="4">Hospitalization</th> 做标题栏。它只是个视觉占位符，没有语义归属，辅助技术无法将其与后续数据行建立逻辑绑定。

• 每个业务逻辑区块（如“住院费用”“门诊服务”）单独抽成一个 <table> <li>用 <code><section></section> 包裹，并通过 aria-labelledby 关联其 <h2></h2> 标题
• <caption></caption> 放在每个 <table> 内部，说明该表具体用途（如 <code>Caption>Hospitalization cost breakdown）
• 这样屏幕阅读器用户可直接用快捷键跳转到某个 <section></section>，且每个表的行列关系完全独立、可验证

<thead> 和 <code><tbody> 不是可选项，是结构锚点 <p>省略 <code><thead> 或把所有行都塞进 <code><tbody>，等于主动放弃表格的语义骨架。浏览器和辅助工具依赖这些标签推断数据结构。 <ul><li><code><thead> 必须只包含表头行（<code><tr>），且其中单元格应为 <code><th>，并设置 <code>scope 属性（如 scope="col" 或 scope="row"）

<tbody> 是数据主体，每行 <code><tr> 中的首列若为行标题，也应用 <code><th scope="row">，而非 <code><td> <li>避免把 <code><thead> 写在 <code><tbody> 后面——DOM 解析顺序错乱会导致部分旧版读屏软件误判 <h3>跨行/跨列合并只用于真实数据关系，不用于“画线”</h3> <p><code>rowspan 和 colspan 是语义操作，不是 CSS 替代品。滥用它们会让单元格坐标系统崩坏，尤其影响自动化处理（如爬虫解析、Excel 导出）。

立即学习“前端免费学习笔记（深入）”；

• 仅当某值在逻辑上确实覆盖多行或多列时才用（例如“总费用”横跨四列，“科室名称”纵跨三行）
• 禁止用 colspan="1" 或 rowspan="1" 显式声明——这是冗余代码，增加维护成本
• 合并后，剩余单元格数量必须严格对齐：某行若因 colspan="3" 少了两个 <td>，就得确保该行其他单元格总数仍等于表头列数 <li>调试技巧：用浏览器开发者工具检查每个 <code><td> 的 <code>getBoundingClientRect() 坐标，再比对 rowIndex/cellIndex，能快速定位错位单元格

  真正难的不是写对标签，而是判断哪些内容“本就不该挤在同一张表里”。业务分组边界模糊时，宁可多套一层 <section></section>，也不要强行用 colspan 撑开表头——结构清晰比视觉整齐重要得多。