title: Overlap table cells in HTML with margins
body: <p>I'm trying to do an HTML email that have columns overlapped. No problems to do this with divs, but need to do it with tables and I didn't played with tables in years!</p>
  
  <p><img src="https://i.stack.imgur.com/bkUln.jpg" alt="enter image description here"></p>
  
  <p>I need the green col to be displaced from top and overflow on bottom of the row.
  The  blue row will have a background image and the green col will be a solid background color.
  I've tried nesting a new table inside the row and doing the row taller than the background image, but I want to know if is there any other solution.</p>
  
  <p>This is what I currently have:</p>
  
  <p><a href="http://jsfiddle.net/mdzvvx3q/" rel="nofollow noreferrer">http://jsfiddle.net/mdzvvx3q/</a></p>
  
  <pre><code>&lt;table width="800" border="0" cellspacing="0"&gt;
    &lt;tr&gt;
      &lt;td height="98" colspan="2" style="background-color: #efefef;"&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr height="400" style="background-color: #f0c;"&gt;
      &lt;td colspan="2"&gt;
          &lt;table height="400" width="800" border="0" cellspacing="0"&gt;
            &lt;tr&gt;
              &lt;td height="100" colspan="2"&gt;Some text here&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td width="500" height="278"&gt;&lt;/td&gt;
              &lt;td width="300" style="background-color: #0fc;"&gt;More text here&lt;/td&gt;
            &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/td&gt;
    &lt;tr&gt;
      &lt;td height="98" colspan="2" style="background-color: #efefef;"&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>