Responsive email table spacing - Ipad and Iphones Still Showing - html

I am developing responsive email for all platforms
In a table I placed 4 images in <TD> and in center <TD> used background color. Further used table collapse for each table.
For your quick reference code is mentioned below:
But issue I am facing in I-Pad and I-phone is there are slight white lines visible with each circle as you can see in below image.
Your help in this regards will be a great favor to me.
Look forward for your answers at your earliest convenience.
<table width="285" border="0" cellspacing="0" cellpadding="0"
style="border-spacing:0; background-color:#f0f0f0;">
<tr>
<td width="5" height="35" ></td>
<td width="35" height="35" align="left" valign="top" ><table width="35" style="border-collapse:collapse;" height="35" border="0" align="left" cellpadding="0" cellspacing="0" >
<tr>
<td height="6" colspan="3" valign="bottom"><img src="em-cr-tp.jpg" alt="" width="35" height="6" hspace="0" vspace="0" border="0" align="absbottom" style="display:block;" /></td>
</tr>
<tr>
<td width="5" height="23" align="right"><img src="em-cr-lt.jpg" alt="" width="5" height="23" hspace="0" vspace="0" border="0" style="display:block;" /></td>
<td width="25" height="22" align="center" valign="middle" bgcolor="#D50000"><span style="color:#FFFFFF;font-size:14px;font-family:Arial;font-weight:bold;text-align:center;">21</span></td>
<td width="5" height="23" align="left"><img src="em-cr-rt.jpg" alt="" width="5" height="23" hspace="0" vspace="0" border="0" style="display:block;" /></td>
</tr>
<tr>
<td height="6" colspan="3" valign="top"><img src="em-cr-bt.jpg" alt="" width="35" height="6" hspace="0" vspace="0" border="0" style="display:block;" /></td>
</tr>
</table></td>
<td width="5" height="35" align="left" valign="top" ></td>
<td width="35" height="35" align="left" valign="top"><table width="35" style="border-collapse:collapse;" height="35" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td height="6" colspan="3" valign="bottom"><img src="em-cr-tp.jpg" alt="" width="35" height="6" hspace="0" vspace="0" border="0" align="absbottom" style="display:block;" /></td>
</tr>
<tr>
<td width="5" height="23" align="right"><img src="em-cr-lt.jpg" style="display:block;" alt="" hspace="0" vspace="0" width="5" height="23" border="0" /></td>
<td width="25" height="22" align="center" valign="middle" bgcolor="#D50000"><span style="color:#FFFFFF;font-size:14px;font-family:Arial;font-weight:bold;text-align:center;">21</span></td>
<td width="5" height="23" align="left"><img src="em-cr-rt.jpg" alt="" width="5" height="23" hspace="0" vspace="0" border="0" style="display:block;" /></td>
</tr>
<tr>
<td height="6" colspan="3" valign="top"><img src="em-cr-bt.jpg" alt="" width="35" height="6" hspace="0" vspace="0" border="0" style="display:block;" /></td>
</tr>
</table></td>
<td width="5" height="35" align="left" valign="top" ></td>
<td width="35" height="35" align="left" valign="top" style="border-collapse:collapse;"><table width="35" style="border-collapse:collapse;" height="35" border="0" align="center" cellpadding="0" cellspacing="0" >
<tr>
<td height="6" colspan="3" valign="bottom"><img src="em-cr-tp.jpg" alt="" width="35" height="6" hspace="0" vspace="0" border="0" align="absbottom" style="display:block;" /></td>
</tr>
<tr>
<td width="5" height="23" align="right"><img src="em-cr-lt.jpg" style="display:block;" alt="" hspace="0" vspace="0" width="5" height="23" border="0" /></td>
<td width="25" height="22" align="center" valign="middle" bgcolor="#D50000"><span style="color:#FFFFFF;font-size:14px;font-family:Arial;font-weight:bold;text-align:center;">21</span></td>
<td width="5" height="23" align="left"><img src="em-cr-rt.jpg" alt="" width="5" height="23" hspace="0" vspace="0" border="0" style="display:block;" /></td>
</tr>
<tr>
<td height="6" colspan="3" valign="top"><img src="em-cr-bt.jpg" alt="" width="35" height="6" hspace="0" vspace="0" border="0" style="display:block;" /></td>
</tr>
</table></td>
<td width="5" height="35" align="left" valign="top" ></td>
<td width="35" height="35" align="left" valign="top" style="border-collapse:collapse;"><table width="35" style="border-collapse:collapse;" height="35" border="0" align="center" cellpadding="0" cellspacing="0" >
<tr>
<td height="6" colspan="3" valign="bottom"><img src="em-cr-tp.jpg" alt="" width="35" height="6" hspace="0" vspace="0" border="0" align="absbottom" style="display:block;" /></td>
</tr>
<tr>
<td width="5" height="23" align="right"><img src="em-cr-lt.jpg" alt="" width="5" height="23" hspace="0" vspace="0" border="0" style="display:block;" /></td>
<td width="25" height="22" align="center" valign="middle" bgcolor="#D50000"><span style="color:#FFFFFF;font-size:14px;font-family:Arial;font-weight:bold;text-align:center;">21</span></td>
<td width="5" height="23" align="left"><img src="em-cr-rt.jpg" alt="" width="5" height="23" hspace="0" vspace="0" border="0" style="display:block;" /></td>
</tr>
<tr>
<td height="6" colspan="3" valign="top"><img src="em-cr-bt.jpg" alt="" width="35" height="6" hspace="0" vspace="0" border="0" style="display:block;" /></td>
</tr>
</table></td>
<td width="5" height="35" align="left" valign="top" ></td>
<td width="35" height="35" align="left" valign="top" style="border-collapse:collapse;"><table width="35" style="border-collapse:collapse;" height="35" border="0" align="center" cellpadding="0" cellspacing="0" >
<tr>
<td height="6" colspan="3" valign="bottom"><img src="em-cr-tp.jpg" alt="" width="35" height="6" hspace="0" vspace="0" border="0" align="absbottom" style="display:block;" /></td>
</tr>
<tr>
<td width="5" height="23" align="right"><img src="em-cr-lt.jpg" alt="" width="5" height="23" hspace="0" vspace="0" border="0" style="display:block;" /></td>
<td width="25" height="22" align="center" valign="middle" bgcolor="#D50000"><span style="color:#FFFFFF;font-size:14px;font-family:Arial;font-weight:bold;text-align:center;">21</span></td>
<td width="5" height="23" align="left"><img src="em-cr-rt.jpg" alt="" width="5" height="23" hspace="0" vspace="0" border="0" style="display:block;" /></td>
</tr>
<tr>
<td height="6" colspan="3" valign="top"><img src="em-cr-bt.jpg" alt="" width="35" height="6" hspace="0" vspace="0" border="0" style="display:block;" /></td>
</tr>
</table></td>
<td width="5" height="35" align="left" valign="top" ></td>
<td width="35" height="35" align="left" valign="top" style="border-collapse:collapse;"><table width="35" style="border-collapse:collapse;" height="35" border="0" align="center" cellpadding="0" cellspacing="0" >
<tr>
<td height="6" colspan="3" valign="bottom"><img src="em-cr-tp.jpg" alt="" style="display:block;" width="35" height="6" border="0" align="absbottom" /></td>
</tr>
<tr>
<td width="5" height="23" align="right"><img src="em-cr-lt.jpg" style="display:block;" alt="" width="5" height="23" border="0" /></td>
<td width="25" height="22" align="center" valign="middle" style="color:#ffffff;font-size:12px;font-family:Arial;font-weight:bold;text-align:center;" bgcolor="#D50000">1</td>
<td width="5" height="23" align="left"><img src="em-cr-rt.jpg" alt="" style="display:block;" width="5" height="23" border="0" /></td>
</tr>
<tr>
<td height="6" colspan="3" valign="top"><img src="em-cr-bt.jpg" alt="" style="display:block;" width="35" height="6" border="0" align="texttop" /></td>
</tr>
</table></td>
<td width="5" height="35" align="left" valign="top" ></td>
<td width="35" height="35" align="left" valign="top" style="border-collapse:collapse;"><table width="35" height="35" style="border-collapse:collapse;" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="6" colspan="3" valign="bottom"><img src="white-lotto-tp.jpg" alt="" width="35" height="6" align="absbottom" border="0" /></td>
</tr>
<tr>
<td width="5" height="23" align="right"><img src="white-lotto-lt.jpg" border="0" width="5" height="23" alt="" /></td>
<td width="25" height="23" align="center" valign="middle" bgcolor="#000099"><span style="color:#ffffff;font-size:14px;font-family:Arial;font-weight:bold;text-align:center;">14</span></td>
<td width="5" height="23" align="left"><img src="white-lotto-rt.jpg" border="0" width="5" height="23" alt="" /></td>
</tr>
<tr>
<td height="6" colspan="3" valign="top"><img src="white-lotto-bt.jpg" border="0" width="35" height="6" align="texttop" alt="" /></td>
</tr>
</table></td>
<td width="5" height="35" ></td>
</tr>
</table>


Try a
vertical-align: middle;
in the style attribute of your image element. If that does not work, it would be great to get the complete HTML and an image that shows the issue.

Related

White lines appear on newsletter after using Slice Tool

I created a flyer on Photoshop to send as a newsletter. So I used the slice tool to link certain parts of the flyer. When I sent a sample to my email, there are white lines around the images I linked and it's uneven.
Is there a way to prevent this? The reason I use Photoshop and Dreamweaver is because I have seen people do it and they did have any problems.
I'm using MailChimp to create the newsletter. Here's a sample:
<html>
<head>
<title>centralvet</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (centralvet.psd) -->
<table id="Table_01" width="600" height="1032" border="0" cellpadding="0" cellspacing="0" style="margin:0 auto 0 auto;">
<tr>
<td colspan="20">
<img src="images/centralvet_01.jpg" width="600" height="30" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="30" alt=""></td>
</tr>
<tr>
<td rowspan="4">
<img src="images/centralvet_02.jpg" width="2" height="743" alt=""></td>
<td colspan="18"><img src="images/centralvet_03.jpg" width="595" height="136" alt=""></td>
<td rowspan="9">
<img src="images/centralvet_04.jpg" width="3" height="1001" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="136" alt=""></td>
</tr>
<tr>
<td colspan="18"><img src="images/centralvet_05.jpg" width="595" height="389" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="389" alt=""></td>
</tr>
<tr>
<td colspan="4" rowspan="2"><img src="images/centralvet_06.jpg" width="207" height="218" alt=""></td>
<td colspan="14">
<img src="images/centralvet_07.jpg" width="388" height="8" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="8" alt=""></td>
</tr>
<tr>
<td>
<img src="images/centralvet_08.jpg" width="6" height="210" alt=""></td>
<td colspan="6"><img src="images/centralvet_09.jpg" width="131" height="210" alt=""></td>
<td colspan="7">
<img src="images/centralvet_10.jpg" width="251" height="210" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="210" alt=""></td>
</tr>
<tr>
<td colspan="17"><img src="images/centralvet_11.jpg" width="466" height="113" alt=""></td>
<td colspan="2" rowspan="2">
<img src="images/centralvet_12.jpg" width="131" height="193" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="113" alt=""></td>
</tr>
<tr>
<td colspan="17">
<img src="images/centralvet_13.jpg" width="466" height="80" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="80" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="3">
<img src="images/centralvet_14.jpg" width="100" height="65" alt=""></td>
<td><img src="images/centralvet_15.jpg" width="52" height="52" alt=""></td>
<td rowspan="3">
<img src="images/centralvet_16.jpg" width="6" height="65" alt=""></td>
<td rowspan="2"><img src="images/centralvet_17.jpg" width="51" height="53" alt=""></td>
<td colspan="2" rowspan="3">
<img src="images/centralvet_18.jpg" width="8" height="65" alt=""></td>
<td><img src="images/centralvet_19.jpg" width="50" height="52" alt=""></td>
<td rowspan="3">
<img src="images/centralvet_20.jpg" width="5" height="65" alt=""></td>
<td><img src="images/centralvet_21.jpg" width="52" height="52" alt=""></td>
<td rowspan="3">
<img src="images/centralvet_22.jpg" width="4" height="65" alt=""></td>
<td colspan="2"><img src="images/centralvet_23.jpg" width="53" height="52" alt=""></td>
<td rowspan="3">
<img src="images/centralvet_24.jpg" width="4" height="65" alt=""></td>
<td><img src="images/centralvet_25.jpg" width="53" height="52" alt=""></td>
<td rowspan="3">
<img src="images/centralvet_26.jpg" width="5" height="65" alt=""></td>
<td colspan="2"><img src="images/centralvet_27.jpg" width="52" height="52" alt=""></td>
<td rowspan="3">
<img src="images/centralvet_28.jpg" width="102" height="65" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="52" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/centralvet_29.jpg" width="52" height="13" alt=""></td>
<td rowspan="2">
<img src="images/centralvet_30.jpg" width="50" height="13" alt=""></td>
<td rowspan="2">
<img src="images/centralvet_31.jpg" width="52" height="13" alt=""></td>
<td colspan="2" rowspan="2">
<img src="images/centralvet_32.jpg" width="53" height="13" alt=""></td>
<td rowspan="2">
<img src="images/centralvet_33.jpg" width="53" height="13" alt=""></td>
<td colspan="2" rowspan="2">
<img src="images/centralvet_34.jpg" width="52" height="13" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td>
<img src="images/centralvet_35.jpg" width="51" height="12" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="12" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="2" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="98" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="52" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="6" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="51" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="6" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="2" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="50" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="5" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="52" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="4" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="18" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="35" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="4" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="53" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="5" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="23" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="29" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="102" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="3" height="1" alt=""></td>
<td></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>

Mailer Displays gaps on left and right of the images

I am developing a mailer so on my outlook it looks fine but on my Gmail it shows Spacing on the left and right of the image. I used style="display:block" which only removed the spacing at the bottom. How do I remove on the left and on the right?
Here is my code:
<table cellpadding="0" cellspacing="0" border="0" align="center" width="100%">
<tr>
<td><table cellpadding="0" cellspacing="0" border="0" align="center" width="695px">
<tr>
<td align="center"><span style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#677880;">View on the web</span></td>
</tr>
<tr>
<td height="10px"><img src="/images/spacer.gif" height="10" width="1" style="display:block;" border="0" alt="Spacer"/></td>
</tr>
<tr>
<td valign="top" border="0" align="right"><img src="/images/top.jpg" width="695" height="52" border="0" style="display:block;" ></td>
</tr>
<tr>
<td><table cellpadding="0" cellspacing="0" border="0" width="695px">
<tr>
<td width="461px" border="0" valign="top" align="right"><img src="/images/father-and-husband.jpg" width="461" height="300" style="display:block;" border="0" ></td>
<td valign="top" width="234px" border="0"><table cellpadding="0" cellspacing="0" border="0" width="234px">
<tr>
<td valign="top" border="0"><img src="/images/life-2-lefe-logo.jpg" width="234" height="131" style="display:block" border="0" alt="Click here to visit our website" title="Click here to visit our website" align="left"></td>
</tr>
<tr>
<td valign="top" border="0"><img src="/images/botton-logo.jpg" width="234" height="169" style="display:block" border="0" align="left"></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td><table cellpadding="0" cellspacing="0" border="0" width="695px">
<tr>
<td border="0" valign="top" align="right"><img src="/images/donating-a-kidney.jpg" width="461" height="290" style="display:block;margin:0" border="0" alt="Click here to email us" title="Click here to email us"></td>
<td border="0" valign="top"><img src="/images/right-email.jpg" width="234" height="290" style="display:block" border="0" align="left"></td>
</tr>
</table></td>
</tr>
<tr>
<td border="0" valign="top" align="right"><img src="/images/bottom.jpg" width="695" height="341" style="display:block" border="0"></td>
</tr>
<tr>
<td align="center" valign="center" height="30" style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#677880;">If you do not wish to recieve any further email notifications, <a style="color:#ec1c23;" href="{{components.unsubscribe}}" target="_blank">click here to unsubscribe.</a></td>
</tr>
</table></td>
</tr>
</table>

Table doesn't center in website or in dreamweaver

This is my issue, I'm working on a site that I just imported from Photoshop, sliced it up etc. Now I need to center the whole site as a table, but when I set the table width to 100% it doesn't work at all.
Here's the code:
<!DOCTYPE html>
<head>
<title>Design</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (Design.psd) -->
<table id="Table_01" width="100%" height="1501" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3">
<img src="images/Design_01.gif" width="689" height="210" alt=""></td>
<td>
<img src="images/Design_02.gif" width="173" height="210" alt=""></td>
<td colspan="2">
<img src="images/Design_03.gif" width="135" height="210" alt=""></td>
<td colspan="2">
<img src="images/Design_04.gif" width="209" height="210" alt=""></td>
<td>
<img src="images/Design_05.gif" width="1" height="210" alt=""></td>
<td colspan="6">
<img src="images/Design_06.gif" width="229" height="210" alt=""></td>
<td colspan="2">
<img src="images/Design_07.gif" width="192" height="210" alt=""></td>
<td colspan="4">
<img src="images/Design_08.gif" width="214" height="210" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="210" alt=""></td>
</tr>
<tr>
<td colspan="21">
<img src="images/Design_09.gif" width="1842" height="2" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="2" alt=""></td>
</tr>
<tr>
<td colspan="21">
<img src="images/Design_10.gif" width="1842" height="161" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="161" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/Design_11.gif" width="48" height="245" alt=""></td>
<td>
<img src="images/Design_12.gif" width="74" height="80" alt=""></td>
<td colspan="17" rowspan="2">
<img src="images/Design_13.gif" width="1598" height="245" alt=""></td>
<td>
<img src="images/Design_14.gif" width="74" height="80" alt=""></td>
<td rowspan="2">
<img src="images/Design_15.gif" width="48" height="245" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="80" alt=""></td>
</tr>
<tr>
<td>
<img src="images/Design_16.gif" width="74" height="165" alt=""></td>
<td>
<img src="images/Design_17.gif" width="74" height="165" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="165" alt=""></td>
</tr>
<tr>
<td colspan="21">
<img src="images/Design_18.gif" width="1842" height="2" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="2" alt=""></td>
</tr>
<tr>
<td colspan="21">
<img src="images/Design_19.gif" width="1842" height="53" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="53" alt=""></td>
</tr>
<tr>
<td colspan="5" rowspan="10">
<img src="images/Design_20.gif" width="986" height="504" alt=""></td>
<td colspan="5" rowspan="2">
<img src="images/Design_21.gif" width="324" height="29" alt=""></td>
<td colspan="2" rowspan="6">
<img src="images/Design_22.gif" width="16" height="230" alt=""></td>
<td colspan="6">
<img src="images/Design_23.gif" width="324" height="12" alt=""></td>
<td colspan="3" rowspan="10">
<img src="images/Design_24.gif" width="192" height="504" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="12" alt=""></td>
</tr>
<tr>
<td rowspan="4">
<img src="images/Design_25.gif" width="70" height="205" alt=""></td>
<td colspan="3" rowspan="3">
<img src="images/Design_26.gif" width="185" height="161" alt=""></td>
<td colspan="2" rowspan="4">
<img src="images/Design_27.gif" width="69" height="205" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="17" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="3">
<img src="images/Design_28.gif" width="105" height="188" alt=""></td>
<td>
<img src="images/Design_29.gif" width="115" height="114" alt=""></td>
<td colspan="2" rowspan="3">
<img src="images/Design_30.gif" width="104" height="188" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="114" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/Design_31.gif" width="115" height="74" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="30" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="images/Design_32.gif" width="185" height="44" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="44" alt=""></td>
</tr>
<tr>
<td colspan="5" rowspan="2">
<img src="images/Design_33.gif" width="324" height="15" alt=""></td>
<td colspan="6">
<img src="images/Design_34.gif" width="324" height="13" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="13" alt=""></td>
</tr>
<tr>
<td rowspan="4">
<img src="images/Design_35.gif" width="13" height="274" alt=""></td>
<td colspan="3" rowspan="2">
<img src="images/Design_36.gif" width="97" height="146" alt=""></td>
<td colspan="4">
<img src="images/Design_37.gif" width="230" height="2" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="2" alt=""></td>
</tr>
<tr>
<td colspan="5" rowspan="2">
<img src="images/Design_38.gif" width="324" height="217" alt=""></td>
<td colspan="4" rowspan="2">
<img src="images/Design_39.gif" width="230" height="217" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="144" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/Design_40.gif" width="3" height="128" alt=""></td>
<td colspan="2">
<img src="images/Design_41.gif" width="94" height="73" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="73" alt=""></td>
</tr>
<tr>
<td colspan="5">
<img src="images/Design_42.gif" width="324" height="55" alt=""></td>
<td colspan="6">
<img src="images/Design_43.gif" width="324" height="55" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="55" alt=""></td>
</tr>
<tr>
<td colspan="21">
<img src="images/Design_44.gif" width="1842" height="323" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="323" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="48" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="74" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="567" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="173" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="124" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="11" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="94" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="115" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="103" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="13" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="3" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="70" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="24" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="16" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="145" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="47" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="22" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="70" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="74" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="48" height="1" alt=""></td>
<td></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>

Setting the table width to 100% does not really center anything.
It sets the table to fill all available space (mind the space for scrollbars).
Since your table cells contain images with a defined width, these images define the (minimum) width for each table cell (and subsequently for each column)
So, if your screen is smaller than the sum total of your images, you will need to scroll horizontally to see the entire result.
In general, if you want to use a table to center your content, nested tables are the simplest way:
<table width="100%">
<tr>
<td align="center">
<table><!-- this is the actual content table -->
<tr>
<td>this is my content</td>
</tr>
</table>
</td>
</tr>
</table>
Hope that helps a bit?
And a side note: Most people will tell you that creating a layout entirely from tables is quite old-fashionned. <div>s and CSS might be a better approach, but i gather you are a beginner?

Outlook is breaking my email

Having some issues with an email I am designing. I am trying to have the three tables alongside each other, with the next three below (but done so when I view it on mobile it will be one after the other.) This works well in email clients like yahoo and hotmail but it starts breaking in outlook, where two will be side by side with the next table being below (creating a huge space on the right side of the email.) I am quite new to email design, so any help would be brilliant.
<table width="593" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="593"><table style="float: left;" align="center"
border="0" width="196" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td height="5" colspan="3"></td>
<td width="5" colspan="3" rowspan="4"> </td>
</tr>
<tr>
<td colspan="3" bgcolor="#ffffff"><span
style="font-size: 10px; font-family: Helvetica, Arial, sans-serif;"><img
src="entertainment.gif" alt="" width="38" height="38"
align="left" /> <strong>Magazine
Subsription</strong><br> Some awesome stuff</span></td>
</tr>
<tr>
<td colspan="3" bgcolor="#ffffff"><a target="_blank"
href="LINK"><img style="display: block;" src="IMAGE"
alt="Parrot Rolling Spider" border="0" height="190" width="190"></a></td>
</tr>
<tr>
<td width="5" height="26" bgcolor="#ffffff"> </td>
<td width="84" bgcolor="#ffffff"><span
style="font-size: 10px; font-weight: bold; font-family: Helvetica, Arial, sans-serif;">12,000
Points</span></td>
<td width="101" bgcolor="#ffffff"><table align=""
width="101" height="26" cellpadding="0" cellspacing="0">
<tr valign="middle" align="center" width="300" height="10"
bgcolor="#8ec043" style="color: #ffffff;">
<td valign="middle"
style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif"
width="83" height="24"><div align="center">
<a href="LINK"
style="font-size: 10px; font-weight: bold; font-family: Helvetica, Arial, sans-serif; text-decoration: none; line-height: 10px; width: 100%; display: inline-block"><span
style="color: #FFFFFF">Spend Points</span></a>
</div></td>
<td width="16" valign="middle"><a href="LINK"><img
src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/maximile-email-elements2014/arrow.gif"
alt="" width="12" height="16" align="left" /></a></td>
</tr>
</table></td>
</tr>
</tbody>
</table>
<table style="float: left;" align="center" border="0" width="196"
cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td height="5" colspan="3"></td>
<td width="5" colspan="3" rowspan="4"> </td>
</tr>
<tr>
<td colspan="3" bgcolor="#ffffff"><span
style="font-size: 10px; font-family: Helvetica, Arial, sans-serif;"><img
src="entertainment.gif" alt="" width="38" height="38"
align="left" /> <strong>Magazine
Subsription</strong><br> Some awesome stuff</span></td>
</tr>
<tr>
<td colspan="3" bgcolor="#ffffff"><a target="_blank"
href="LINK"><img style="display: block;" src="IMAGE"
alt="Parrot Rolling Spider" border="0" height="190" width="190"></a></td>
</tr>
<tr>
<td width="5" height="26" bgcolor="#ffffff"> </td>
<td width="84" bgcolor="#ffffff"><span
style="font-size: 10px; font-weight: bold; font-family: Helvetica, Arial, sans-serif;">12,000
Points</span></td>
<td width="101" bgcolor="#ffffff"><table align=""
width="101" height="26" cellpadding="0" cellspacing="0">
<tr valign="middle" align="center" width="300" height="10"
bgcolor="#8ec043" style="color: #ffffff;">
<td valign="middle"
style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif"
width="83" height="24"><div align="center">
<a href="LINK"
style="font-size: 10px; font-weight: bold; font-family: Helvetica, Arial, sans-serif; text-decoration: none; line-height: 10px; width: 100%; display: inline-block"><span
style="color: #FFFFFF">Spend Points</span></a>
</div></td>
<td width="16" valign="middle"><a href="LINK"><img
src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/maximile-email-elements2014/arrow.gif"
alt="" width="12" height="16" align="left" /></a></td>
</tr>
</table></td>
</tr>
</tbody>
</table>
<table style="float: left;" align="center" border="0" width="196"
cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td height="5" colspan="3"></td>
<td width="5" colspan="3" rowspan="4"> </td>
</tr>
<tr>
<td colspan="3" bgcolor="#ffffff"><span
style="font-size: 10px; font-family: Helvetica, Arial, sans-serif;"><img
src="entertainment.gif" alt="" width="38" height="38"
align="left" /> <strong>Magazine
Subsription</strong><br> Some awesome stuff</span></td>
</tr>
<tr>
<td colspan="3" bgcolor="#ffffff"><a target="_blank"
href="LINK"><img style="display: block;" src="IMAGE"
alt="Parrot Rolling Spider" border="0" height="190" width="190"></a></td>
</tr>
<tr>
<td width="5" height="26" bgcolor="#ffffff"> </td>
<td width="84" bgcolor="#ffffff"><span
style="font-size: 10px; font-weight: bold; font-family: Helvetica, Arial, sans-serif;">12,000
Points</span></td>
<td width="101" bgcolor="#ffffff"><table align=""
width="101" height="26" cellpadding="0" cellspacing="0">
<tr valign="middle" align="center" width="300" height="10"
bgcolor="#8ec043" style="color: #ffffff;">
<td valign="middle"
style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif"
width="83" height="24"><div align="center">
<a href="LINK"
style="font-size: 10px; font-weight: bold; font-family: Helvetica, Arial, sans-serif; text-decoration: none; line-height: 10px; width: 100%; display: inline-block"><span
style="color: #FFFFFF">Spend Points</span></a>
</div></td>
<td width="16" valign="middle"><a href="LINK"><img
src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/maximile-email-elements2014/arrow.gif"
alt="" width="12" height="16" align="left" /></a></td>
</tr>
</table></td>
</tr>
</tbody>
</table>
<p> </p>
<table style="float: left;" align="center" border="0" width="196"
cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td height="5" colspan="3"></td>
<td width="5" colspan="3" rowspan="4"> </td>
</tr>
<tr>
<td colspan="3" bgcolor="#ffffff"><span
style="font-size: 10px; font-family: Helvetica, Arial, sans-serif;"><img
src="entertainment.gif" alt="" width="38" height="38"
align="left" /> <strong>Magazine
Subsription</strong><br> Some awesome stuff</span></td>
</tr>
<tr>
<td colspan="3" bgcolor="#ffffff"><a target="_blank"
href="LINK"><img style="display: block;" src="IMAGE"
alt="Parrot Rolling Spider" border="0" height="190" width="190"></a></td>
</tr>
<tr>
<td width="5" height="26" bgcolor="#ffffff"> </td>
<td width="84" bgcolor="#ffffff"><span
style="font-size: 10px; font-weight: bold; font-family: Helvetica, Arial, sans-serif;">12,000
Points</span></td>
<td width="101" bgcolor="#ffffff"><table align=""
width="101" height="26" cellpadding="0" cellspacing="0">
<tr valign="middle" align="center" width="300" height="10"
bgcolor="#8ec043" style="color: #ffffff;">
<td valign="middle"
style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif"
width="83" height="24"><div align="center">
<a href="LINK"
style="font-size: 10px; font-weight: bold; font-family: Helvetica, Arial, sans-serif; text-decoration: none; line-height: 10px; width: 100%; display: inline-block"><span
style="color: #FFFFFF">Spend Points</span></a>
</div></td>
<td width="16" valign="middle"><a href="LINK"><img
src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/maximile-email-elements2014/arrow.gif"
alt="" width="12" height="16" align="left" /></a></td>
</tr>
</table></td>
</tr>
</tbody>
</table>
<table style="float: left;" align="center" border="0" width="196"
cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td height="5" colspan="3"></td>
<td width="5" colspan="3" rowspan="4"> </td>
</tr>
<tr>
<td colspan="3" bgcolor="#ffffff"><span
style="font-size: 10px; font-family: Helvetica, Arial, sans-serif;"><img
src="entertainment.gif" alt="" width="38" height="38"
align="left" /> <strong>Magazine
Subsription</strong><br> Some awesome stuff</span></td>
</tr>
<tr>
<td colspan="3" bgcolor="#ffffff"><a target="_blank"
href="LINK"><img style="display: block;" src="IMAGE"
alt="Parrot Rolling Spider" border="0" height="190" width="190"></a></td>
</tr>
<tr>
<td width="5" height="26" bgcolor="#ffffff"> </td>
<td width="84" bgcolor="#ffffff"><span
style="font-size: 10px; font-weight: bold; font-family: Helvetica, Arial, sans-serif;">12,000
Points</span></td>
<td width="101" bgcolor="#ffffff"><table align=""
width="101" height="26" cellpadding="0" cellspacing="0">
<tr valign="middle" align="center" width="300" height="10"
bgcolor="#8ec043" style="color: #ffffff;">
<td valign="middle"
style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif"
width="83" height="24"><div align="center">
<a href="LINK"
style="font-size: 10px; font-weight: bold; font-family: Helvetica, Arial, sans-serif; text-decoration: none; line-height: 10px; width: 100%; display: inline-block"><span
style="color: #FFFFFF">Spend Points</span></a>
</div></td>
<td width="16" valign="middle"><a href="LINK"><img
src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/maximile-email-elements2014/arrow.gif"
alt="" width="12" height="16" align="left" /></a></td>
</tr>
</table></td>
</tr>
</tbody>
</table>
<table style="float: left;" align="center" border="0" width="196"
cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td height="5" colspan="3"></td>
<td width="5" colspan="3" rowspan="4"> </td>
</tr>
<tr>
<td colspan="3" bgcolor="#ffffff"><span
style="font-size: 10px; font-family: Helvetica, Arial, sans-serif;"><img
src="entertainment.gif" alt="" width="38" height="38"
align="left" /> <strong>Magazine
Subsription</strong><br> Some awesome stuff</span></td>
</tr>
<tr>
<td colspan="3" bgcolor="#ffffff"><a target="_blank"
href="LINK"><img style="display: block;" src="IMAGE"
alt="Parrot Rolling Spider" border="0" height="190" width="190"></a></td>
</tr>
<tr>
<td width="5" height="26" bgcolor="#ffffff"> </td>
<td width="84" bgcolor="#ffffff"><span
style="font-size: 10px; font-weight: bold; font-family: Helvetica, Arial, sans-serif;">12,000
Points</span></td>
<td width="101" bgcolor="#ffffff"><table align=""
width="101" height="26" cellpadding="0" cellspacing="0">
<tr valign="middle" align="center" width="300" height="10"
bgcolor="#8ec043" style="color: #ffffff;">
<td valign="middle"
style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif"
width="83" height="24"><div align="center">
<a href="LINK"
style="font-size: 10px; font-weight: bold; font-family: Helvetica, Arial, sans-serif; text-decoration: none; line-height: 10px; width: 100%; display: inline-block"><span
style="color: #FFFFFF">Spend Points</span></a>
</div></td>
<td width="16" valign="middle"><a href="LINK"><img
src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/maximile-email-elements2014/arrow.gif"
alt="" width="12" height="16" align="left" /></a></td>
</tr>
</table></td>
</tr>
</tbody>
</table>
<p> </p>
<p> </p></td>
</tr>
</tbody>
</table>

you can get around this outlook bug by putting your content in completely separate tables like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" valign="top" style="font-size:36px;">SOME HEADER CONTENT TO GO IN HERE</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="593"><table style="float: left;" align="center" border="0" width="196"
cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td bgcolor="#ffffff"><span
style="font-size: 10px; font-family: Helvetica, Arial, sans-serif;"><img
src="entertainment.gif" alt="" width="38" height="38"
align="left" /> <strong>Magazine
Subsription</strong><br> Some awesome stuff</span></td>
</tr>
<tr>
<td bgcolor="#ffffff"><a target="_blank"
href="LINK"><img style="display: block;" src="IMAGE"
alt="Parrot Rolling Spider" border="0" height="190" width="190"></a></td>
</tr>
<tr>
<td bgcolor="#ffffff"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="84" height="26" bgcolor="#ffffff"><span
style="font-size: 10px; font-weight: bold; font-family: Helvetica, Arial, sans-serif;">12,000
Points</span></td>
<td width="101" bgcolor="#ffffff"><table align=""
width="101" height="26" cellpadding="0" cellspacing="0">
<tr valign="middle" align="center" width="300" height="10"
bgcolor="#8ec043" style="color: #ffffff;">
<td valign="middle"
style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif"
width="83" height="24"><div align="center">
<a href="LINK"
style="font-size: 10px; font-weight: bold; font-family: Helvetica, Arial, sans-serif; text-decoration: none; line-height: 10px; width: 100%; display: inline-block"><span
style="color: #FFFFFF">Spend Points</span></a>
</div></td>
<td width="16" valign="middle"><a href="LINK"><img
src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/maximile-email-elements2014/arrow.gif"
alt="" width="12" height="16" align="left" /></a></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</tbody>
</table>
<table style="float: left;" align="center" border="0" width="196"
cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td bgcolor="#ffffff"><span
style="font-size: 10px; font-family: Helvetica, Arial, sans-serif;"><img
src="entertainment.gif" alt="" width="38" height="38"
align="left" /> <strong>Magazine
Subsription</strong><br> Some awesome stuff</span></td>
</tr>
<tr>
<td bgcolor="#ffffff"><a target="_blank"
href="LINK"><img style="display: block;" src="IMAGE"
alt="Parrot Rolling Spider" border="0" height="190" width="190"></a></td>
</tr>
<tr>
<td bgcolor="#ffffff"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="84" height="26" bgcolor="#ffffff"><span
style="font-size: 10px; font-weight: bold; font-family: Helvetica, Arial, sans-serif;">12,000
Points</span></td>
<td width="101" bgcolor="#ffffff"><table align=""
width="101" height="26" cellpadding="0" cellspacing="0">
<tr valign="middle" align="center" width="300" height="10"
bgcolor="#8ec043" style="color: #ffffff;">
<td valign="middle"
style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif"
width="83" height="24"><div align="center">
<a href="LINK"
style="font-size: 10px; font-weight: bold; font-family: Helvetica, Arial, sans-serif; text-decoration: none; line-height: 10px; width: 100%; display: inline-block"><span
style="color: #FFFFFF">Spend Points</span></a>
</div></td>
<td width="16" valign="middle"><a href="LINK"><img
src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/maximile-email-elements2014/arrow.gif"
alt="" width="12" height="16" align="left" /></a></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</tbody>
</table>
<table style="float: left;" align="center" border="0" width="196"
cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td bgcolor="#ffffff"><span
style="font-size: 10px; font-family: Helvetica, Arial, sans-serif;"><img
src="entertainment.gif" alt="" width="38" height="38"
align="left" /> <strong>Magazine
Subsription</strong><br> Some awesome stuff</span></td>
</tr>
<tr>
<td bgcolor="#ffffff"><a target="_blank"
href="LINK"><img style="display: block;" src="IMAGE"
alt="Parrot Rolling Spider" border="0" height="190" width="190"></a></td>
</tr>
<tr>
<td bgcolor="#ffffff"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="84" height="26" bgcolor="#ffffff"><span
style="font-size: 10px; font-weight: bold; font-family: Helvetica, Arial, sans-serif;">12,000
Points</span></td>
<td width="101" bgcolor="#ffffff"><table align=""
width="101" height="26" cellpadding="0" cellspacing="0">
<tr valign="middle" align="center" width="300" height="10"
bgcolor="#8ec043" style="color: #ffffff;">
<td valign="middle"
style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif"
width="83" height="24"><div align="center">
<a href="LINK"
style="font-size: 10px; font-weight: bold; font-family: Helvetica, Arial, sans-serif; text-decoration: none; line-height: 10px; width: 100%; display: inline-block"><span
style="color: #FFFFFF">Spend Points</span></a>
</div></td>
<td width="16" valign="middle"><a href="LINK"><img
src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/maximile-email-elements2014/arrow.gif"
alt="" width="12" height="16" align="left" /></a></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="593"><table style="float: left;" align="center" border="0" width="196"
cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td bgcolor="#ffffff"><span
style="font-size: 10px; font-family: Helvetica, Arial, sans-serif;"><img
src="entertainment.gif" alt="" width="38" height="38"
align="left" /> <strong>Magazine
Subsription</strong><br> Some awesome stuff</span></td>
</tr>
<tr>
<td bgcolor="#ffffff"><a target="_blank"
href="LINK"><img style="display: block;" src="IMAGE"
alt="Parrot Rolling Spider" border="0" height="190" width="190"></a></td>
</tr>
<tr>
<td bgcolor="#ffffff"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="84" height="26" bgcolor="#ffffff"><span
style="font-size: 10px; font-weight: bold; font-family: Helvetica, Arial, sans-serif;">12,000
Points</span></td>
<td width="101" bgcolor="#ffffff"><table align=""
width="101" height="26" cellpadding="0" cellspacing="0">
<tr valign="middle" align="center" width="300" height="10"
bgcolor="#8ec043" style="color: #ffffff;">
<td valign="middle"
style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif"
width="83" height="24"><div align="center">
<a href="LINK"
style="font-size: 10px; font-weight: bold; font-family: Helvetica, Arial, sans-serif; text-decoration: none; line-height: 10px; width: 100%; display: inline-block"><span
style="color: #FFFFFF">Spend Points</span></a>
</div></td>
<td width="16" valign="middle"><a href="LINK"><img
src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/maximile-email-elements2014/arrow.gif"
alt="" width="12" height="16" align="left" /></a></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</tbody>
</table>
<table style="float: left;" align="center" border="0" width="196"
cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td bgcolor="#ffffff"><span
style="font-size: 10px; font-family: Helvetica, Arial, sans-serif;"><img
src="entertainment.gif" alt="" width="38" height="38"
align="left" /> <strong>Magazine
Subsription</strong><br> Some awesome stuff</span></td>
</tr>
<tr>
<td bgcolor="#ffffff"><a target="_blank"
href="LINK"><img style="display: block;" src="IMAGE"
alt="Parrot Rolling Spider" border="0" height="190" width="190"></a></td>
</tr>
<tr>
<td bgcolor="#ffffff"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="84" height="26" bgcolor="#ffffff"><span
style="font-size: 10px; font-weight: bold; font-family: Helvetica, Arial, sans-serif;">12,000
Points</span></td>
<td width="101" bgcolor="#ffffff"><table align=""
width="101" height="26" cellpadding="0" cellspacing="0">
<tr valign="middle" align="center" width="300" height="10"
bgcolor="#8ec043" style="color: #ffffff;">
<td valign="middle"
style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif"
width="83" height="24"><div align="center">
<a href="LINK"
style="font-size: 10px; font-weight: bold; font-family: Helvetica, Arial, sans-serif; text-decoration: none; line-height: 10px; width: 100%; display: inline-block"><span
style="color: #FFFFFF">Spend Points</span></a>
</div></td>
<td width="16" valign="middle"><a href="LINK"><img
src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/maximile-email-elements2014/arrow.gif"
alt="" width="12" height="16" align="left" /></a></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</tbody>
</table>
<table style="float: left;" align="center" border="0" width="196"
cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td bgcolor="#ffffff"><span
style="font-size: 10px; font-family: Helvetica, Arial, sans-serif;"><img
src="entertainment.gif" alt="" width="38" height="38"
align="left" /> <strong>Magazine
Subsription</strong><br> Some awesome stuff</span></td>
</tr>
<tr>
<td bgcolor="#ffffff"><a target="_blank"
href="LINK"><img style="display: block;" src="IMAGE"
alt="Parrot Rolling Spider" border="0" height="190" width="190"></a></td>
</tr>
<tr>
<td bgcolor="#ffffff"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="84" height="26" bgcolor="#ffffff"><span
style="font-size: 10px; font-weight: bold; font-family: Helvetica, Arial, sans-serif;">12,000
Points</span></td>
<td width="101" bgcolor="#ffffff"><table align=""
width="101" height="26" cellpadding="0" cellspacing="0">
<tr valign="middle" align="center" width="300" height="10"
bgcolor="#8ec043" style="color: #ffffff;">
<td valign="middle"
style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif"
width="83" height="24"><div align="center">
<a href="LINK"
style="font-size: 10px; font-weight: bold; font-family: Helvetica, Arial, sans-serif; text-decoration: none; line-height: 10px; width: 100%; display: inline-block"><span
style="color: #FFFFFF">Spend Points</span></a>
</div></td>
<td width="16" valign="middle"><a href="LINK"><img
src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/maximile-email-elements2014/arrow.gif"
alt="" width="12" height="16" align="left" /></a></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" valign="top" style="font-size:36px;">FOOTER<br />
Ts&Cs to go here as well</td>
</tr>
</table>
</body>
</html>
Also, avoid rowspan and colspan - use nested tables instead. I have amended this in the code above

Why is there space under my image? [duplicate]

This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 8 years ago.
Notice in the following screenshot, there is a white space under image:
I don't understand why there is this gap, how do I remove it. The page is live at http://goo.gl/Kf8FV5
Markup:
<section id="pricing-table">
<table width="950" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="190" height="10"> </td>
<td width="760" height="10" colspan="4" align="left" valign="top"><img src="images/membership-plans-design_03.png" alt=""></td>
</tr>
<tr>
<td align="center" valign="middle" class="featurehead">Heading</td>
<td colspan="4" class="featureset"><table width="760" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="middle" class="featurehead">Heading</td>
<td colspan="4" class="featureset"><table width="760" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="middle" class="featurehead">Heading</td>
<td colspan="4" class="featureset"><table width="760" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="middle" class="featurehead">Heading</td>
<td colspan="4" class="featureset"><table width="760" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="middle" class="featurehead">Heading</td>
<td colspan="4" class="featureset"><table width="760" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="middle" class="featurehead">Heading</td>
<td colspan="4" class="featureset"><table width="760" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="middle" class="featurehead">Heading</td>
<td colspan="4" class="featureset"><table width="760" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="middle" class="featurehead">Heading</td>
<td colspan="4" class="featureset"><table width="760" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
</tr>
</table></td>
</tr>
<tr>
<td> </td>
<td><img src="images/membership-plans-design_08.png" alt=""></td>
<td><img src="images/membership-plans-design_09.png" alt=""></td>
<td><img src="images/membership-plans-design_10.png" alt=""></td>
<td><img src="images/membership-plans-design_11.png" alt=""></td>
</tr>
</table>
</section>
Css:
#pricing-table { margin: 0 auto; width: 950px; text-align: center;}
.featureset {
background-image: url(images/membership-plans-design_05.png);
background-repeat: no-repeat;
height: 42px;
margin: 0;
padding: 0;
color:#FFF;
}
.featurehead {
background-color:#CCC;
font-weight: bold;
border-bottom: 1px solid grey;
}
Any help is highly appreciated. Thanks in advance.

Images are inline elements, so they have a white space after them (like a <span> element). To remove that white space, change them to block elements like this :
img{
display:block;
}

Change <img src="images/membership-plans-design_03.png" alt=""> to
<img src="images/membership-plans-design_03.png" alt="" style="display: block;">
And to be more precise images are an inline-block element.

Add this to your CSS,
section#pricing-table td img{
display: block;
}

<img> is an inline-block element by default. You can remove the white space around it by setting it's parent's font-size to zero, or by changing it's display property.
JSFiddle Demo