如何製作一張有3列，2列和1列填滿整個桌子的桌子？

Question

聲明：我通常不使用表格來佈局，但它們似乎是html電子郵件的最佳選擇。相信我，在電子郵件中玩divs 糟透了。我在尋找最好的解決辦法，我 沒有太多的限制，以如何設計...

我幾乎沒有，但我有下面的代碼有問題：

<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，180px，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

的DIV將在這裏更好的解決方案。你確定你需要一張桌子嗎？也許，divs？

Answer 3

如果你必須使用一個表 - 你真的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 4

創建一個表格，其中每列代表每個可能的分區，然後廣泛使用colspans。所以你有可能休息210,300,490,& 600共4列。

然後你會想在第一行跨越1，2，1，所有的全長跨越4，然後將各佔一半跨越2和2