HTML表格复现求助：rowspan与colspan属性使用困惑

rowspan与colspan使用思路 #

• colspan用于控制单元格横向跨列，属性值为需要跨越的列数量，例：colspan="2"代表该单元格占2列宽度
• rowspan用于控制单元格纵向跨行，属性值为需要跨越的行数量，例：rowspan="3"代表该单元格占3行高度

核心注意事项 #

1. 单行列数总和要匹配表格总列数：比如表格总共有4列，某行已经有一个单元格设置了colspan="2"，该行剩余需要补充的普通单元格数量为2，否则会出现布局错位
2. 跨行单元格要写在覆盖范围的首行：比如某单元格需要纵向跨2行，要把该单元格写在第一行的对应位置，第二行对应位置不需要再写<td>标签
3. 不要设置超出表格范围的跨行列值：比如表格总共只有3行，不要给单元格设置rowspan="4"，会出现未知布局异常

参考示例代码 #

你可以参考下方简单示例调整你的表格代码：

<table border="1" cellpadding="8" cellspacing="0">
  <!-- 第一行 -->
  <tr>
    <td rowspan="2">纵向跨2行</td>
    <td colspan="2">横向跨2列</td>
  </tr>
  <!-- 第二行，第一个位置已经被上面的rowspan占用，不需要写td -->
  <tr>
    <td>普通单元格</td>
    <td>普通单元格</td>
  </tr>
  <!-- 第三行 -->
  <tr>
    <td>普通单元格</td>
    <td>普通单元格</td>
    <td>普通单元格</td>
  </tr>
</table>

调试技巧 #

• 先画表格草稿，给每个需要合并的单元格标注对应的跨行列数值，数清楚每行列数总和是否匹配后再写代码
• 先做小范围合并验证逻辑正确，再逐步扩展到整个复杂表格，不要一次性写完所有代码再调试
• 出现错位时逐行注释<tr>内容排查，快速定位到单元格数量不匹配的行

内容的提问来源于stack exchange，提问作者Coder