无CSS场景下HTML表格rowspan/colspan不生效问题排查

核心问题 #

表格结构编写错误，和你设置的单元格宽高、文本对齐CSS无关：

• 该表格总列数为6列，每一行中，未被上方rowspan占用的单元格colspan累加值必须等于6，你原有代码多行列数计算错误
• 跨行列排布逻辑错误：被rowspan覆盖的行对应位置不能重复编写<td>，原有代码存在单元格遗漏、重复问题，导致浏览器自动补全错位单元格，最终跨行列属性看起来没有生效。

修复后代码（无需自定义CSS，仅用原生表格属性即可实现和参考效果一致的展示） #

<table border="1" cellspacing="0">
    <caption>Another table 1.0</caption>
    <tr>
        <td rowspan="2" colspan="2" width="120" height="40" align="center">r1c1</td>
        <td width="60" height="20" align="center">r1c3</td>
        <td rowspan="2" width="60" height="40" align="center">r1c4</td>
        <td colspan="2" rowspan="2" width="120" height="40" align="center">r1c5</td>
    </tr>
    <tr>
        <td rowspan="2" width="60" height="40" align="center">r2c3</td>
    </tr>
    <tr>
        <td colspan="2" width="120" height="20" align="center">r3c1</td>
        <td colspan="2" width="120" height="20" align="center">r3c4</td>
        <td width="60" height="20" align="center">r3c6</td>
    </tr>
    <tr>
        <td width="60" height="20" align="center">r4c1</td>
        <td colspan="2" width="120" height="20" align="center">r4c2</td>
        <td rowspan="2" width="60" height="40" align="center">r4c4</td>
        <td colspan="2" width="120" height="20" align="center">r4c5</td>
    </tr>
    <tr>
        <td rowspan="2" colspan="2" width="120" height="40" align="center">r5c1</td>
        <td rowspan="2" width="60" height="40" align="center">r5c3</td>
        <td rowspan="2" colspan="2" width="120" height="40" align="center">r5c5</td>
    </tr>
    <tr>
        <td width="60" height="20" align="center">r6c4</td>
    </tr>
</table>

编写规范 #

• 不需要CSS也可以实现单元格宽高、居中效果，直接在<td>标签上添加width、height、align属性即可
• 编写跨行列表格前先确认总列数，每写完一行计算一次：当前行所有单元格colspan值之和 + 被上方行rowspan占用的列数 = 总列数，不符合则一定会出现错位
• 若某单元格设置了rowspan="n"，其正下方的n-1行对应位置不需要再编写<td>标签，否则会出现多余单元格挤位。

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