如何使有3,2和1列，填补了整个表的表？

Question

免责声明：我不经常使用的布局表，但他们似乎是HTML邮件的最佳选择。相信我，用div的电子邮件中发挥吸更糟。我在寻找最好的解决办法，我没有太多的限制，以如何设计？

我几乎没有，但我有下面的代码有问题：

<table border=1 width="600px">
  <tbody>
    <tr height="140px">
      <td width="210px"></td>
      <td width="180px"></td>
      <td width="210px"></td>
    </tr>
    <tr height="200px">
      <td colspan="3"></td>
    </tr>
    <tr height="100px">
      <td colspan="3"></td>
    </tr>
    <tr height="300px">
      <td width="300px"></td>
      <td></td>
    </tr>
  </tbody>
</table>

jsfiddle

我的具体问题是与最后一个细胞，我想他们将各占50％来划分表空间。

正如你可以看到我修改的最后<td>的宽度为300像素的（表的一半），但也改变了第一个单元格的宽度，这是一个令人失望的结果，我想前三td保持这一210px，180像素，210px比例。

以防万一，使之显得更加清晰这里是一个草图：

Answer 1

你不能用一个表做到这一点。列将始终产品线。如果这是对一些其他内容的布局，比你真的需要看看基于div的布局。

如果你必须使用表：

<table border=1 width="600px">
    <tbody>
        <tr height="140px">
            <td width="210px"></td>
            <td width="180px"></td>
            <td width="210px"></td>
        </tr>
        <tr height="200px">
            <td colspan="3"></td>
        </tr>
        <tr height="100px">
            <td colspan="3"></td>
        </tr>
        <tr height="300px">
            <td colspan="3">
                <table>
                    <tr>
                        <td width="300"></td>
                        <td width="300"></td>
                    </tr>
                </table>
            </td>
        </tr>
    </tbody>
</table>

Answer 2

如果你必须使用一个表 - 你真的shoudldn't，除非你是displaing表格数据 - 在这里再解决，在我看来，是使顶行一个单元，并在其中嵌套另一个表中吧，因为许多细胞宽度如需要。所以：

<table>
<tr><td colspan="2">
    <table><tr>
        <td width="210"></td>
        <td width="180"></td>
        <td width="210"></td>
    </tr></table>
</td></tr>
<tr><td colspan="2"></td></tr>
<tr><td colspan="2"></td></tr>
<tr><td width="50%"></td><td width="50%"></td></tr>
</table>

Answer 3

创建其中每列代表每个可能的分割，然后自由的使用colspans表。所以，你必须在210，300，490，600及可能断裂，共4列。

然后，你会想在第一行跨越1，2，1，所有的全长跨越4，然后将各占一半跨度2,2。

Answer 4

div一定这里是更好的解决方案。你确定你需要一个表吗？也许，div的？