正确使用colspan和rowspan需遵循“从左到右、从上到下逐行书写，每行单元格数与逻辑列数对齐”原则；colspan="n"占用右侧n-1列位置，rowspan="m"要求后续m-1行对应列留空，否则导致错行、空白列或语义崩坏。
HTML 表格里 colspan 和 rowspan 怎么用才不乱套
合并单元格不是加个属性就完事，错位、跨行错乱、语义崩坏是高频问题。核心原则：从左到右、从上到下逐行写 <tr>，每行的 <code><td>/<code><th> 数量必须和“逻辑列数”对齐（即所有 <code>colspan/rowspan 展开后总列数一致）。
常见错误现象：table 渲染错行、右侧空出一列、表头和数据列对不上、屏幕阅读器读错结构。
-
colspan="2"表示该单元格横跨 2 列，它会“吃掉”右边一个单元格的位置，那一列不能再有别的<td> <li> <code>rowspan="3"表示该单元格纵跨 3 行，后续两行的对应列位置必须留空（不能塞<td>，否则会多出一列） <li>不要在同一个 <code><tr> 里对相邻单元格都设 <code>colspan，容易超出预期列数；先算好整张表“最大列数”，再填示例（3 列逻辑表，第一行首单元格跨 2 列）：
<table border="1"> <tr> <th colspan="2">姓名/学号</th> <th>班级</th> </tr> <tr> <td>张三</td> <td>2021001</td> <td>高一(3)班</td> </tr> </table>为什么用了
rowspan后下面几行总是多出空白列本质是没跳过被跨占的列位置。浏览器不会自动帮你“跳过”，你得手动删掉那些位置上的
<td> 或 <code><th>。 <p>使用场景：左侧固定标签列（如“语文”“数学”），右侧成绩数据需按组横向排列；或合并表头中的年级/学期等层级。</p> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/ai/1927" title="Texta"><img src="https://img.php.cn/upload/ai_manual/001/246/273/68b6d58b732d4595.png" alt="Texta" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a href="/ai/1927" title="Texta">Texta</a> <p>AI博客和文章一键生成</p> </div> <a href="/ai/1927" title="Texta" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <ul><li>假设第 1 行第 1 列设了 <code>rowspan="4"，那么第 2、3、4 行的第 1 列位置，不能出现任何或 - 如果忘了删，浏览器会把那个多余的
<td> 当作新列渲染，导致整行右移 <li>检查方法：把所有 <code>rowspan值加起来，减去重复覆盖的部分，结果应等于该列“实际出现的单元格数”用 CSS
display: grid替代colspan/rowspan可行吗可以，但不是万能替代。Grid 适合布局已知、静态的表格状内容；原生
table仍不可替代——尤其涉及可访问性（scope、headers）、打印样式、Excel 导出、屏幕阅读器解析。性能与兼容性影响：
grid在老版 IE 完全不支持；复杂嵌套表格用 Grid 模拟rowspan需大量grid-row/grid-column手动定位，维护成本陡增。- 仅当数据是展示型、无语义要求、且不需要导出/打印时，才考虑用
div+display: grid - 若需键盘导航、
Ctrl+P打印、或被 JAWS/NVDA 正确朗读，请坚持语义化table+colspan/rowspan -
table-layout: fixed配合width可缓解合并后列宽塌缩问题，比 Grid 更可控
合并单元格后，CSS 样式不生效或错位怎么办
最常踩的坑是选择器误判——比如用
tr:nth-child(2) td:first-child去选第二行第一个单元格，但第一行用了colspan="2"，第二行第一个<td> 实际对应的是“逻辑第 1 列”，而 CSS 伪类按 DOM 顺序数，不是按逻辑列数。 <ul><li>避免依赖 <code>:nth-child定位合并后的单元格；优先用 class（如<td class="score">）或属性选择器（<code>td[colspan]）border-collapse: collapse必须设在table上，否则合并单元格边框会双线重叠- 设置了
rowspan的单元格，其vertical-align对齐的是整个跨行区域，不是单行；若要居中，确保父<tr> 没有冲突的 <code>height或line-height语义和结构比视觉更重要。一旦开始用
colspan/rowspan，就得全程按“逻辑表格”思维写 HTML，而不是看着渲染效果倒推。 - 如果忘了删，浏览器会把那个多余的
