HTML表合并布局

Question

我试图获得：

+---------+---------------------------+--------------+
|         |                           |              |
+---------+                           |              |
|         |                           |              |
|         +-----------------+---------+              |
|         |                 |         |              |
|         +-----------------+         |              |
|         |                 |         |              |
|         +-----------------+         |              |
|         |                 |         |              |
+---------+-----------------+---------+              |
|         |                 |         |              |
+---------+-----------------+---------+--------------+

该HTML：

<table>
    <tr>
        <td></td>
        <td rowspan="2" colspan="2"></td>
        <td rowspan="6"></td>
    </tr>
    <tr>
        <td rowspan="4"></td>
    </tr>
    <tr>
        <td></td>
        <td rowspan="3"></td>
    </tr>
    <tr>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

但是，这是行不通的。我不能够合并第一行的第二列2层* 2的细胞。它永远只能成为colspan="2"。该rowspan="2"不工作。我试图使这个使用HTML表格生成网站，如http://html-tables.com/但它并没有在那里工作过。

这就是我得到：

+---------+---------------------------+--------------+
|         |                           |              |
+---------+-----------------+---------+              |
|         |                 |         |              |
|         +-----------------+         |              |
|         |                 |         |              |
|         +-----------------+         |              |
|         |                 |         |              |
+---------+-----------------+---------+              |
|         |                 |         |              |
+---------+-----------------+---------+--------------+

我觉得这是不可能的HTML，因为它没有在任何地方工作？有什么方法可以达到我想要的结果？如该图上示出。

Answer 1

首先，你的图形显示有六行，但该表只有五tr元素。为了解决这个问题，重复第四tr元素，

  <tr>
      <td></td>
  </tr>

即使在此修复程序，表不看的权利，但这是因为它没有真正的内容。没有什么，需要在第二行有正面的高度。添加一些多行内容到第二td元素，你会看到，它使得第二排增益高度。

Answer 2

检查数列和表的行不匹配。 div元素里面你可以创建一个HTML表格下面给出：

<div>
    <table border="1" width="50%" cellspacing="10" cellpadding="10">
        <tr>
            <td style="width:60px"></td>
            <td></td>
            <td rowspan="3"></td>
        </tr>
        <tr style="height:50px">
            <td colspan="2">
                <table border="1" width="100%" cellspacing="10" cellpadding="10">
                    <tr>
                        <td></td>
                        <td>
                            <table width="100%"  cellpadding="10" cellspacing="10" border="1">
                                <tr>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td></td>
                                </tr>
                            </table>
                        </td>
                        <td></td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <table border="1" width="100%" cellspacing="10" cellpadding="10">
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</div>