html email table showing gaps in outlook.com and gmail - html

Question

I have created a html email using tables. It displays fine in browsers but when I view it in outlook.com, gmail and outlook client there are horizontal 'gaps', the table also seems to be wider (on the right) and longer (at the bottom).
I have been searching the internet for a long time for an answer with no success, and have tried many different things ( I am new to html). I have tried putting the table in another table container, I have deleted the gaps between the tds, I have added a paragraph container around the images (which fixed one of the gaps in gmail but created another in outlook client that wasn't there before). All my cells have defined widths and heights, as does my table. I have set the padding, borders etc to 0. I tried adding display:block to each image but it pushed the whole table out horizontally and made it ridiculously wide.
I am out of ideas! Please help as I need to sort this issue out, I have not even added the text yet. I have included my code here. Many thanks.
<!-- Save for Web Slices (AP-MelbourneCup14-4.psd) -->
<table id="table_01" width="100%" height="100%"><table id="Table_02" width="510" height="818" border="0" style="border-spacing:0" cellpadding="0" cellspacing="0" bgcolor="#F0f0f0" align="center">
<tr>
<td colspan="6" width="510" height="19"></td>
</tr>
<tr>
<td width="510" height="75" colspan="6"><p style="margin:0; font-size:0px; line-height:0"><img id="AP_MelbourneCup14_4_02" src="images/AP-MelbourneCup14-4_02.png" width="510" height="75" alt="" border="0"/></td>
</tr>
<tr>
<td colspan="6" width="510" height="76"></td>
</tr>
<tr>
<td rowspan="9" width="22" height="521"></td>
<td rowspan="3" width="355" height="225" bgcolor="#f0f0f0"><p style="margin:0; font-size:0px; line-height:0"><img id="AP_MelbourneCup14_4_05" src="images/AP-MelbourneCup14-4_05.png" width="355" height="225" alt="" border="0"/></td>
<td colspan="4" width="133" height="107"></td>
</tr>
<tr>
<td colspan="3" width="108" height="87" bgcolor="#000000"></td>
<td rowspan="8" width="25" height="414"></td>
</tr>
<tr>
<td colspan="3" rowspan="2" width="108" height="56"></td>
</tr>
<tr>
<td width="355" height="25"></td>
</tr>
<tr>
<td colspan="2" width="398" height="33" bgcolor="#303473"></td>
<td colspan="2" width="65" height="33"></td>
</tr>
<tr>
<td rowspan="4" width="355" height="238"><p style="margin:0; font-size:0px; line-height:0"><img id="AP_MelbourneCup14_4_13" src="images/AP-MelbourneCup14-4_13.png" width="355" height="238" alt="" border="0"/></td>
<td colspan="2" width="57" height="57"><p style="margin:0; font-size:0px; line-height:0"><img id="AP_MelbourneCup14_4_14" src="images/AP-MelbourneCup14-4_14.png" width="57" height="57" alt="" border="0"/></td>
<td rowspan="2" width="51" height"112"></td>
</tr>
<tr>
<td colspan="2" width="57" height="55"></td>
</tr>
<tr>
<td colspan="3" width="108" height="87" bgcolor="#000000"></td>
</tr>
<tr>
<td colspan="3" width="108" height="39"></td>
</tr>
<tr>
<td colspan="6" width="510" height="105"><p style="margin:0; font-size:0px; line-height:0"><img src="images/AP-MelbourneCup14-4_19.png" alt="" width="510" height="105" align="bottom" id="AP_MelbourneCup14_4_19" border="0"/></p></td>
</tr>
<tr>
<td colspan="6" width="510" height="22" bgcolor="#0697d4"></td>
</tr>
</table> </table>
<!-- End Save for Web Slices -->

Answer 1

There is so much wrong with the code. It's overly complex for starters. The images should have style="display:block" if you don't need to have anything inline with them so as to avoid some email clients adding unwanted extra padding around the images. You specify columns and rowspans on lines 24-26 but they don't add up. You have paragraph tags without the closing tag... Since you are new to HTML, you may want to try the new Litmus tool for creating emails: https://litmus.com/email-builder