如何为同一行中的单元格创建不同高度的HTML表格？

Question

我正在尝试使用以下布局创建HTML表格：

我尝试了这个，以及一些类似的东西，但无论我做什么，布局最终都像一团糟。

<table>
    <tr>
        <td rowspan="2">A</td>
        <td rowspan="1">B</td>
    </tr>
    <tr>
        <td rowspan="1">C</td>
        <td rowspan="2">D</td>
    </tr>
</table>

Answer 1

插图中实际上有三行：

<table>
    <tr>
        <td rowspan="2" height="40">A</td>
        <td rowspan="1" height="20">B</td>
    </tr>
    <tr>
        <td rowspan="2">D</td>
    </tr>
    <tr>
        <td rowspan="1">C</td>
    </tr>
</table>

height属性当然可以调整，但是如果你没有它们，第二行将折叠到尽可能小的尺寸。

http://jsfiddle.net/mblase75/mgKe9/

Answer 2

您需要确保有足够的行供您的单元格跨越，并指定权限行中的单元格。这应该有助于清除它（jsfiddle）：

<table border="1">
    <tr>
        <td rowspan="2">A</td>
        <td>B</td>
        <td>Normal</td>
    </tr>
    <tr>
        <td rowspan="2">D</td>        
        <td>Normal</td>
    </tr>
    <tr>
        <td>C</td>
        <td>Normal</td>
    </tr>
</table>

Answer 3

您在问题中显示的表格如下：

<table>
    <tr>
        <td> </td> // <-------------- Top left
        <td rowspan="2"> </td> // <-- Top right
    </tr>
    <tr>
        <td rowspan="2"> </td> // <-- Middle left
    </tr>
    <tr>
        <td> </td> // <-------------- Bottom right
    </tr>
</table>

您没有已被另一个<td>的{​​{1}}或rowspan“覆盖”的特定colspan代码。