正确使用colspan和rowspan需严格匹配列数：colspan="3"表示本格占3列，右侧对应td必须删除；rowspan必须写在起始单元格且下方对应位置留空；二者混用时被覆盖区域所有td均需移除，否则表格结构错乱。
直接用 colspan 和 rowspan 属性就行，但填错值或漏删单元格，表格立刻错位——这不是浏览器 bug，是结构被你写崩了。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
colspan 是怎么“吞掉右边格子”的
colspan="3" 不是“合并 3 列”，而是“本格向右覆盖接下来的 2 个格子”，总共占 3 列位置。关键点在于：同一行里，它右边原本该有的 <td> 必须删掉，否则列数超限，后续单元格全偏移。
<ul>
<li>错误写法：<code><td colspan="3">标题</td>
<td>A</td>
<td>B</td> → 实际渲染出 5 列，但视觉上只有 4 个内容，最后一列挤到下一行
<td colspan="3">标题</td>，后面不跟任何 <td>
<li>如果整行共 5 列，想让前两列合并，就写 <code><td colspan="2">姓名</td>
<td>年龄</td>
<td>城市</td>
<td>职业</td>，确保总数仍是 5rowspan 写在哪一行、哪一列才生效
rowspan 必须写在“起始单元格”的 <td> 或 <code><th> 标签里，且只写一次。它向下“吃掉”正下方的格子，那些位置后续行中不能再出现 <code><td>，否则结构断裂。
<ul><li>常见错误：把 <code>rowspan="2" 写在第二行第一列的 <td> 里 → 完全无效，因为第一行该列已被占满，浏览器无法回溯
<li>正确做法：第一行第一列写 <code><td rowspan="2">类别</td>，第二行第一列**彻底留空**，不写任何 <td>
<li>跨 3 行时，要确保表格还有至少 2 行剩余；<code>rowspan="5" 却只剩 3 行，多余部分会被忽略，但列对齐仍可能出错
同时用 colspan 和 rowspan 容易踩的坑
可以一起用，比如 <td rowspan="2" colspan="3">汇总</td>，但它覆盖的是一个 2×3 的矩形区域——这个区域内所有原本存在的 <td> 都得消失，包括下一行同一列的两个单元格。
<ul><li>典型翻车场景：<code><tr>
<td rowspan="2" colspan="2">A</td>
<td>B</td>
</tr>
<tr><td>C</td></tr> → 第二行只有 1 个 <td>，但第一行已占 3 列，第二行实际列宽只剩 1，C 会跑到 A 下方左侧，而不是 B 下方
<li>调试建议：打开开发者工具，选中 <code><tr>，看右侧“Computed”里 <code>grid-template-columns 或直接数渲染后的 <td> 个数，比肉眼数 HTML 更准
<li>动态生成时（如 Vue/React），<code>rowspan 值必须是数字类型；字符串 "2" 多数能跑，但 SSR 下可能失效；rowspan={0} 或负值会导致行为不可预测
最麻烦的不是属性不会写，而是合并后列数在源码和渲染结果之间不一致——尤其当 <thead> 和 <code><tbody> 分开写时，<code><thead> 里一个 <code>rowspan="3" 会让表头列数“变少”，而 <tbody> 每行按原始列数写，结果就是表头和数据完全不对齐。这种问题只能靠手算或脚本验证每行展开后的列总数，没法靠 CSS 修。 </tbody>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
