Horizontal spacing between wrapper tables in HTML email - tried various fixes

Question

I have a horizontal space between 2 wrapper tables (only in certain clients such as outlook, 2003, 2007, gmail and a few others - works fine in most clients) - link to images:

http://jimharrison.co.uk/wp-content/uploads/2013/11/Untitled-1.jpg

I've tried:

border: collapse; - display: block; (on images) - valign="top" - removing white space between tags - resetting table margins, padding and borders (this left aligned my content so a big no no)

It's entirely possible the fix is really obvious... - check out the code and email here:

http://jimharrison.co.uk/wp-content/uploads/2013/11/index.html

Answer 1

Put your content into table rows, not stacked tables. You can nest within those table rows, just try to avoid multiple tables in the same parent element (sitting next to each other in the code).

Also, set the desired bgcolor on the table row's td's containing those (now nested) tables.

<table width="600" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td bgcolor="#2f1d36">
      <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td>
            this is your purple table
          </td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td bgcolor="#d76118">
      <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td>
            this is your orange table
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table> 

It is always good practice to have the parent element color set, as expanding like this is unavoidable when someone forwards an email from Outlook. Setting the color there will not prevent the gaps appearing, but will hide the white (or whatever color) stripes/gaps created.