HTML Email putting slices together - html

Question

I am trying to do the following design
So my outer table will have 2 table rows.
The first table row will have 3 td's which will each contain their own inner table (tables represented by colour shading in the design).
So my first table rows tds look like this
<table width="650" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3"><img src="image1.jpg" alt="" width="186" height="20" border="0" style="display: block;"></td>
</tr>
<tr>
<td><img src="image4.jpg" alt="" width="34" height="66" border="0" style="display: block;"></td>
<td><img src="image5.jpg" alt="" width="120" height="66" border="0" style="display: block;"></td>
<td><img src="image6.jpg" alt="" width="32" height="66" border="0" style="display: block;"></td>
</tr>
<tr>
<td colspan="3"><img src="image12.jpg" alt="" width="186" height="20" border="0" style="display: block;"></td>
</tr>
</table>
</td>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3"><img src="image2.jpg" alt="" width="67" height="106" border="0" style="display: block;"></td>
</tr>
</table>
</td>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="4"><img src="image3.jpg" alt="" width="397" height="26" border="0" style="display: block;"></td>
</tr>
<tr>
<td><img src="image7.jpg" alt="" width="178" height="25" border="0" style="display: block;"></td>
<td><img src="image8.jpg" alt="" width="83" height="25" border="0" style="display: block;"></td>
<td><img src="image9.jpg" alt="" width="15" height="25" border="0" style="display: block;"></td>
<td><img src="image10.jpg" alt="" width="121" height="25" border="0" style="display: block;"></td>
</tr>
<tr>
<td colspan="4"><img src="image11.jpg" alt="" width="397" height="55" border="0" style="display: block;"></td>
</tr>
</table>
</td>
</tr>
</table>
Now everything looks fine, just how it should do. I am not too sure if I have done the colspans correctly though?
Anyways, moving onto the second table row, I have the following
<table width="650" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
//first table row data
</tr>
<tr>
<td colspan="4">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="image13.jpg" alt="" width="33" height="122" border="0" style="display: block;"></td>
<td><img src="image14.jpg" alt="" width="255" height="122" border="0" style="display: block;"></td>
</tr>
</table>
</td>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="image15.jpg" alt="" width="362" height="122" border="0" style="display: block;"></td>
</tr>
</table>
</td>
</tr>
</table>
As soon as I add the second row, my design messes up. Essentially, I end up with my design looking something like the following
How can I avoid this from happening? I think it may be to do with my colspans, not too sure though.
Thanks

Answer 1

A couple huge things..
Where is this appearing? Outlook I presume, what version(s)?
define inline widths and max-width for each element where width is a concern, do it inline within table HTML. Maintain outer table wrapping all elements within. If main outer table element is ignored. Nest a few tables as wrappers until elements are contained to desired layout. Use CSS but do it inline.
Read this article.