我可以在表格的最后一行使用行跨度吗？

Question

我想制作一个3 x 3的表格，其中的单元格4跨越下面的两行，并在单元格3的下面插入单元格5。我尝试添加新行并向其中添加一个单元格，它占用了单元格3的跨度（与单元格4相邻） ），而不是直接位于其下方。

问题是，如何跨过下面的单元格4（使其变为2 x 2）并在其旁边添加单元格5？

到目前为止的代码：

 <table border = "1" cellpadding="10">

    <tr>
      <td>Cell1</td>
      <td>Cell2</td>
      <td rowspan = 2>Cell3</td>
    </tr>
    <tr>
      <td rowspan = "2" colspan = "2">Cell4</td>
    </tr>

</table>

我想做这样的事情：

任何帮助将非常感激！

Answer 1

只需添加另一个<tr> 。

我添加了一些CSS以使其更加明显：

tr{
    height: 25px;
}

这是一个小提琴 。 简要说明如下。

说明：

如果将CSS删除，您会注意到该行几乎消失了。 那是因为您实际上没有任何东西。 如果您有另一列实际使用该行的单元格（可见或不可见），则该行将变为可见。

发生这种现象是因为单元格的高度是自动的，因此当它为空时它会缩小为0，在您的情况下，这是因为没有单元格仅散布在上述行上。

编辑：

过去，只有通过设置表格元素内部的高度来使用html的方式，但是从HTML5开始，它已被弃用，并且不惜一切代价避免使用。 用css代替！ 如果由于某种原因，您确实需要旧的html only解决方案，请在此处显示。 但是使用它是非常非常非常糟糕的做法，并且可能与某些浏览器等不兼容。

正如注释中指出的那样，对于border = "1" cellpadding="10"也是有效的：)

Answer 2

首先需要有一个不可见的间隔柱。

另外，这是一个小提琴： http : //jsfiddle.net/tnc1z531/

<style>
    td
    {
        padding: 5px;
        border: 1px solid black;
    }
    .spacer
    {
        border: 0;
        padding: 0;
        height: 30px;
    }
</style>
<table>
    <tr>
        <td class='spacer'></td>
        <td>Cell1</td>
        <td>Cell2</td>
        <td rowspan=2>Cell3</td>
    </tr>
    <tr>
        <td class='spacer'></td>
        <td rowspan="2" colspan="2">Cell4</td>
    </tr>
    <tr>
        <td class='spacer'></td>
        <td>Cell5</td>
    </tr>
</table>