非标准自由宽度高度HTML表

Question

我正在尝试获取代表以下表格布局的HTML标记：

我尝试了这个，但它不起作用：

       <table border="1">
            <tr>
                <td style="height: 800px">
                    1
                </td>
                <td style="width: 300px; height: 400px">
                    2
                </td>
            </tr>
            <tr>
                <td style="height: 200px">
                    <p>3</p>
                </td>
                <td style="height: 600px">
                    4
                </td>
            </tr>
        </table>

Answer 1

这看起来非常接近您提供的图像。这有点棘手，因为它实际上需要3行，但是一旦你的头被rowspan缠绕，那么它就有意义了。

<table border="1">
  <tr style="height: 200px;">
    <td style="width: 400px;" rowspan="2">
      1
    </td>
    <td style="width: 200px;">
      2
    </td>
  </tr>
  <tr style="height: 200px;">
    <td rowspan="2">
      4
    </td>
  </tr>
  <tr style="height: 50px;">
    <td>
      <p>3</p>
    </td>
  </tr>
</table>

Answer 2

您只需要添加另一行并添加rowspans：

<table border="1">
    <tr>
        <td style="width: 300px; height: 400px" rowspan="2">
            1
        </td>
        <td style="width: 300px; height: 200px">
            2
        </td>
    </tr>
    <tr>
        <td style="height: 200px" rowspan="2">
            4
        </td>
    </tr>
    <tr>
        <td style="height: 100px">
            3
        </td>
    </tr>
</table>

请参阅jsfiddle：http://jsfiddle.net/mt009cha/

修改

你必须使用桌子吗？这似乎更像是一个布局，div可能更合适。

HTML：

<div class="container">
    <div class="left">
        <div style="height: 498px">1</div>
        <div style="height: 98px">3</div>
    </div>
    <div class="right">
        <div style="height: 298px">2</div>
        <div style="height: 298px">4</div>
    </div>
</div>

CSS：

div {
    border: 1px solid black;
}

.container {
    width: 600px;
    height: 600px;
}

.left {
    width: 398px;
    height: 100%;
    float: left;
}

.right {
    width: 198px;
    height: 100%;
    float: right;
}

请参阅jsfiddle：http://jsfiddle.net/zynt5j7e/

Answer 3

FIDDL

如果必须使用表格：

<table class="tbl">
    <tr>
        <td>
            <table>
                <tr>
                    <td style="height: 800px">
                        <p>top left</p>
                    </td>
                </tr>
                <tr>
                    <td style="height: 200px">
                        <p>bottom left</p>
                    </td>
                </tr>
            </table>
        </td>
        <td>
            <table>
                <tr>
                    <td style="height: 400px">
                        <p>top left</p>
                    </td>
                </tr>
                <tr>
                    <td style="height: 600px">
                        <p>bottom left</p>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

一些CSS：

.tbl, .tbl table { border-collapse: collapse; width:100%; }
.tbl td, .tbl table td{ border:1px solid black; padding:0; margin: 0; }