title: How to make a table that has 3, 2 and 1 columns that fill the whole table?
body: <blockquote>
    <p><strong>Disclaimer:</strong> 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...</p>
  </blockquote>
  
  <p>I'm almost there but I'm having a problem with the following code:</p>
  
  <pre><code>&lt;table border=1 width="600px"&gt;
    &lt;tbody&gt;
      &lt;tr height="140px"&gt;
        &lt;td width="210px"&gt;&lt;/td&gt;
        &lt;td width="180px"&gt;&lt;/td&gt;
        &lt;td width="210px"&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr height="200px"&gt;
        &lt;td colspan="3"&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr height="100px"&gt;
        &lt;td colspan="3"&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr height="300px"&gt;
        &lt;td width="300px"&gt;&lt;/td&gt;
        &lt;td&gt;&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/MKL3r/embedded/result/" rel="nofollow noreferrer">jsfiddle</a></p>
  
  <p>My specific problem is with the last to cells, that I would like them to divide the space of the table by 50% each.</p>
  
  <p>As you can see I modified the width of the last <code>&lt;td&gt;</code> to 300px (half of the table), but that also modifies the width of the first cell, which is an undesired result, I want the first three <code>td</code> to keep that 210px, 180px, 210px proportion.</p>
  
  <p>Just in case to make it even more clear here is a sketch:</p>
  
  <p><img src="https://i.stack.imgur.com/nPKZi.png" alt="enter image description here"> </p>