colspan和rowspan的本质是语义占位而非视觉挪动，即声明单元格在逻辑网格中占据的行列数，要求后续行或列对应位置必须跳过td/th，否则导致DOM结构错乱、JS读取失败、导出失效及可访问性问题。
colspan 和 rowspan 的本质是语义占位，不是视觉挪动
很多人以为 colspan 是“把两个格子粘一起”，rowspan 是“拉长一个格子”，结果一加就错位。其实它们的作用是：告诉浏览器“这个单元格在逻辑网格中占据多少列/行”，后续行或列里对应位置的 td 必须跳过——否则表格结构就乱了。
常见错误现象：document.querySelector('table').rows[1].cells.length 比第 0 行少；导出 Excel 后合并失效；屏幕阅读器把“2024年度”读成单独一行，却漏掉它下面三列子项。
-
colspan="n"要求同一行中所有td/th的colspan值之和等于该表列数（通常由第一行推算） -
rowspan="n"的单元格，会在接下来的n−1行中“占位”，那些行里相同列索引位置不能再出现td - 避免在
thead中用rowspan跨到tbody—— HTML 规范不支持，浏览器会自动补空td，DOM 已损坏
财务报表级排版：先画逻辑草图，再填属性
真实财报常有三级结构：“主营业务收入” → “产品A、产品B” → “国内、出口”。直接写代码极易错位，关键是反推每行该有多少个“逻辑单元格”。
例如表头两行：
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
<thead>
<tr>
<th rowspan="2">项目</th>
<th colspan="3">2024年</th>
<th colspan="3">2023年</th>
</tr>
<tr>
<th>营业收入</th><th>营业成本</th><th>毛利率</th>
<th>营业收入</th><th>营业成本</th><th>毛利率</th>
</tr>
</thead>
这里第一行 项目 的 rowspan="2" 占据两行第一列；两个 colspan="3" 各占三列，合计 1 + 3 + 3 = 7 列，第二行就必须严格提供 7 个 th（实际写了 6 个？浏览器会悄悄补一个空 th，但 cells.length 变成 7，JS 遍历容易越界）。
- 用开发者工具检查
table.rows[i].cells.length，确认每行一致 - 不要在同一个
td上同时设大数值colspan和rowspan，除非你已手动验证后续所有行都跳过了对应位置 - 导出 Excel 前务必测试：Office 对
colspan/rowspan的识别完全依赖 DOM 结构合法，CSS 模拟合并无效
嵌套表格只能放在 td 或 th 里，且必须完整语义
把 <table> 直接写在 <tr> 下，浏览器会把它踢出当前行——可能塞进父 <table> 外面，也可能丢进隐式 <tbody>。结果就是 document.querySelector('.nested') 返回 null，CSS 选择器 tr > table 完全不生效。
正确做法只有一条：子表格必须完整写进某个 td 或 th 的内容区域，例如：
<td>
<table class="nested">
<thead><tr><th>明细项</th><th>金额</th></tr></thead>
<tbody><tr><td>差旅费</td><td>¥12,300</td></tr></tbody>
</table>
</td>
- 子表格也必须包含
<thead>、<tbody>，不能只写<table><tr><td>...，否则浏览器补全不可控，屏幕阅读器无法识别列含义 - 如需跨列展示（如“点击展开详情”），先用
colspan合并父表的多个td，再往里放子表，避免单个td把列宽撑爆 - 嵌套不是排版手段，而是语义隔离——90% 的问题来自结构不合法或样式未隔离
为什么不用 CSS Grid 替代？因为财报不是普通布局
用 display: grid 确实能做出更灵活的视觉效果，但它无法满足财报三个硬性需求：可访问性、打印分页稳定、Excel 导出保真。
屏幕阅读器靠 HTML 表格的行列关系朗读数据，grid 是扁平容器，没有原生行列语义；打印时 table 自动避免跨页断行，而 grid 容易把一行数据切成两页；Excel 导入 HTML 时，只认 colspan/rowspan，对 CSS 样式视而不见。
- 如果只是做前端展示且无需导出/无障碍，Grid 更可控
- 但只要涉及财务、审计、监管报送场景，
table+ 正确colspan/rowspan是唯一合规路径 - 最易被忽略的一点：所有跨行跨列操作，必须从第一行开始推演列数，中途不能靠“看着差不多”去调，DOM 错一位，下游系统就可能解析失败
