Html 表rowspan和colspan问题

在使用rowspan和colspan查看表结构时，我发现了两个有趣的实例

看法

第一个表应该有三行，但最后一行保留在第二行。虽然我知道如果我将底部行跨度改为1而不是2，这是固定的，但为什么它不能这样工作呢

<table border="1">
    <tr>
        <td rowspan="3">3</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
    <tr>
        <td rowspan="2">2</td>
        <td rowspan="2">2</td>
        <td rowspan="2">2</td>
    </tr>
    <tr>
        <td colspan="4">bottom</td>
    </tr>
</table>

3.
1.
1.
1.
2.
2.
2.
底部

第二个表应该有底部边框，但不显示底部边框。再一次，我意识到最下面一行和左侧框的行间距为2，最下面一行的行间距为1，但我想知道为什么它不能像我在JSFIDLE中显示的那样工作

<table border="1">
    <tr>
        <td rowspan="3">3</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
    <tr>
        <td rowspan="2">2</td>
        <td rowspan="2">2</td>
        <td rowspan="2">2</td>
    </tr>
</table>

3.
1.
1.
1.
2.
2.
2.

第一个表的格式不正确，因为上面的所有列的行span>1。第三行没有要添加单元格的列，但colspan=4

---

第二个表的格式不正确，因为第二行中的所有列的行span>1，因此没有最后一行，也没有底部边框。

我理解。我没有考虑如何将列扩展到第三行，然后再将第三行放在那里。谢谢