colspan="n" 表示合并当前单元格及其后n−1个单元格，而非加宽；rowspan="n" 表示该单元格向下占据n行，对应下方行同列位置必须留空；二者需同步校验行列总数并避免错位。
colspan="n" 不是“加宽”，而是“删掉后面 n−1 个 <td>”
<p>很多人写 <code>colspan="3" 后，还在同一行里继续写三个 <td>，结果整行变成 4 列（3+1），下一行对不齐。浏览器不会帮你跳过，它只按你写的 <code><td> 数量逐列排布。
<ul><li>若某行总列数应为 5，你在第一个 <code><td> 上写 <code>colspan="3"，那这一行后续只能再写 2 个 <td>（不是 4 个）
<li>验证方法：用 <code>Array.from(tr.children).reduce((s, el) => s + (el.colSpan || 1), 0) 计算每行真实列数，确保所有 <tr> 结果一致
<li>常见错误：<code><tr>
<td colspan="3">A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr> → 这行实际有 5 列，但第 4 个 <td> 会挤到第 5 列，导致下一行错位
<h3>rowspan="n" 要求下一行起，同列位置彻底留空</h3>
<p>写了 <code>rowspan="2" 却还在下一行对应列补了 <td>，表格立刻裂开。因为 <code>rowspan="2" 表示“本格向下吞掉正下方那一格”，所以下一行、同一列不能再出现任何 <td> 或 <code><th>。
<ul><li><code><thead> 和 <code><tbody> 是独立的行容器，但列坐标必须对齐：如果 <code><thead> 里用了 <code>rowspan，<tbody> 第一行对应列也必须跳过
<li>典型反例：<code><tr>
<td rowspan="2">Name</td>
<td>Alice</td>
</tr>
<tr>
<td>Name</td>
<td>Bob</td>
</tr> ❌ 错位；正确写法是第二行去掉第一个 <td>
<li>调试技巧：打开开发者工具，选中合并单元格，看 box model 是否跨行渲染；再检查 DOM 中下一行同列是否真的没节点</li>
<h3>同时用 colspan 和 rowspan 时，行列总数必须双重校验</h3>
<p>二维合并（比如一个单元格横跨 2 列、纵跨 3 行）会让结构陡然复杂，稍一疏忽整张表就偏移。这不是属性冲突，而是网格坐标被你手动改写了，但没同步清理周边。</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img
src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a>
<p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p>
</div>
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<ul>
<li>先画草图标出每个单元格的起始行列、跨度，再编码——别靠脑子硬算</li>
<li>每一行的列总数要一致，每一列的行总数也要一致（尤其跨 <code><thead>/<code><tbody> 时）
<li>如果合并区域右下角刚好卡在 <code><tbody> 开头，注意第一行 <code><tr> 里被 <code>rowspan 占用的列，<tbody> 的首行不能补
<h3>响应式与可访问性问题常被忽略</h3>
<p>原生 <code>colspan/rowspan 在静态报表里够用，但一旦涉及动态内容或屏幕阅读器，问题就浮出水面。
- 响应式场景下，
colspan 值无法随屏幕宽度自动调整；rowspan 更无法根据内容高度重算
- 屏幕阅读器依赖 HTML 表格结构推导行/列关系，错位或漏删单元格会导致读屏逻辑混乱，甚至跳过整块数据
- 真正复杂的布局（比如带折叠、排序、筛选的报表），建议用 CSS Grid 或前端框架的表格组件替代原生 table —— 不是不能用，而是维护成本会指数级上升
colspan 值无法随屏幕宽度自动调整；rowspan 更无法根据内容高度重算前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
