colspan="n"本质是占位而非加宽,需删右侧n−1个单元格以确保每行真实列数一致;rowspan="m"要求后续m−1行同列彻底留空;二者共用时须双重校验行列总数并手绘网格验证。

colspan="n" 必须删掉右边 n−1 个 <td>
<p>横向合并不是“让单元格变宽”,而是它占了本该存在的 n 个列位置,所以同一行后续只能写“总列数 − n”个单元格。漏删就会导致整行列数膨胀,下一行对不齐。</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML"><img
src="https://img.php.cn/upload/skill/000/000/081/178998486916110.jpg" alt="Doc To HTML" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="overflowclass">Doc To HTML</a>
<p class="overflowclass">使用 MinerU 文档处理引擎将 Word 文档(.doc、.docx)转换为保留结构和格式的干净 HTML。</p>
</div>
<a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<ul><li>比如逻辑列数是 5,<code><td colspan="2"> 出现在第 1 列,则这一行最多还能写 3 个 <code><td>(不是 4 个)
<li>
<code>colspan 值必须是正整数,colspan="2px" 或 colspan="two" 会被浏览器完全忽略
Array.from(tr.children).reduce((s, el) => s + (el.colSpan || 1), 0) 检查所有 <tr> 是否结果一致
<h3>rowspan="m" 要求后续 m−1 行同列彻底留空</h3>
<p>纵向合并最常出错的地方,就是写了 <code>rowspan="2",却还在下一行的同一列写了 <td> —— 浏览器会把它当新列渲染,整行右移,表格立刻裂开。
<ul><li>
<code>rowspan="2" 表示这个单元格向下吞掉正下方那一格,所以下一行、同一列位置不能有任何 <td> 或 <code><th>
<li><code><thead> 和 <code><tbody> 是独立容器,但列坐标必须对齐:如果表头里 <code><th rowspan="3">,那 <code><tbody> 前两行对应列也必须跳过
<li>调试时直接在开发者工具里选中该单元格,看 box model 是否跨行;再检查 DOM 中下一行同列是否真的没节点</li>
<h3>同时用 colspan 和 rowspan 时,行列总数必须双重校验</h3>
<p>组合使用时,既要保证每行总列数一致,也要保证每列总行数一致。否则表头和数据列脱节,<code>td:nth-child(3) 这类 CSS 选择器会失效,屏幕阅读器也会读错结构。
- 手绘网格是最可靠的校验方式:标出每个单元格覆盖的行列坐标(如从 (0,0) 到 (1,2)),确保所有区域不重叠、不遗漏
- 嵌套表格内使用
colspan/rowspan时,父表格的列数计算不受影响,但子表格自身仍需满足“每行列数一致”原则 - 不要依赖视觉对齐来判断是否正确——边框看起来连上了,不代表语义和 DOM 结构是对的
内容对齐要用 CSS,不是靠空格或 align 属性
HTML 的 align 属性(如 <td align="center">)已废弃,且无法控制垂直对齐;真正可控的方式是用 CSS 的 <code>text-align 和 vertical-align。
- 水平居中:
text-align: center;垂直居中:vertical-align: middle(注意:只对td/th生效,对tr无效) - 想让整行内容都垂直居中,得给
td单独设vertical-align,不能只设tr - 配合
border-collapse: collapse可消除默认间距,但会放大对colspan/rowspan错误的敏感度——一个小错,边框就断开
<td>,或者 <code><thead> 里用了 <code>rowspan 却忘了 <tbody> 对应位置留空。</tbody>
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










