1

我想要得到什么：

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

的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 中是不可能的，因为它在任何地方都不起作用？有什么方法可以达到我想要的结果吗？如图所示。

4

2 回答 2

1

首先，您的图形演示文稿有六行，但表格只有五个tr元素。要解决此问题，请复制第四个tr元素，

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

即使在此修复之后，表格看起来也不正确，但那是因为它没有真正的内容。没有什么要求第二行具有正高度。将一些多行内容添加到第二个td元素，您会看到它使第二行增加了高度。

于 2012-12-25T19:20:46.630 回答
0

检查表的列数和行数是否不匹配。在 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>
于 2012-12-25T18:42:13.530 回答