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"无效。我尝试使用像http://html-tables.com/这样的HTML表格生成器网站来制作它，但它也不适用。

这就是我得到的：

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

我认为这在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>

HTML表合并布局

2 个答案: