html-table - 如何制作一个包含 3、2 和 1 列的表格来填满整个表格？

Question

Disclaimer: I don't usually use tables for layouts but they seem to be the best options for html emails. Believe me, playing with divs in emails sucks even worse. I'm looking for the best workaround, I don't have much restraints as to how to design...

我快完成了，但我遇到了以下代码的问题:

<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> 的宽度到 300px(表格的一半)，但这也修改了第一个单元格的宽度，这是一个不希望的结果，我想要前三个 td保持 210px、180px、210px 的比例。

为了以防万一，这里有一个草图:

Answer 1

如果你必须使用一个表格 - 你真的不应该，除非你正在显示表格数据 - 那么这里的解决方案，在我看来，是让第一行成为一个单元格并在其中嵌套另一个表格，就像根据需要设置许多单元格宽度。所以:

<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>