I'm making a mailing html page and my social buttons keep having some kind of margin that I can't work away. I posted my code and a fiddle below so you can see where I'm stuck.
https://jsfiddle.net/zh78uc9s/
CODE:
<td rowspan="10" style="text-align: left" valign="top" width="auto" border="0" cellspacing="0" cellpadding="0">
<!--Social media knopkes en links-->
<table width="25px" height="100px" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="25" height="25"><img src="elementen/Spacer25.gif" width="25" height="25" border="0" cellspacing="0" cellpadding="0" alt="spacerke" /></td>
</tr>
<tr>
<td width="25" height="25">
<img src="elementen/facebook.gif" width="25" height="25" border="0" cellspacing="0" cellpadding="0" alt="facebook" />
</td>
</tr>
<tr>
<td width="25" height="25">
<img src="elementen/youtube.gif" width="25" height="25" border="0" cellspacing="0" cellpadding="0" alt="youtube" />
</td>
</tr>
<tr>
<td width="25" height="25">
<img src="elementen/linkedin.gif" width="25" height="25" border="0" cellspacing="0" cellpadding="0" alt="linkedin" />
</td>
</tr>
<tr>
<td width="25" height="25">
<img src="elementen/twitter.gif" width="25" height="25" border="0" cellspacing="0" cellpadding="0" alt="twitter" />
</td>
</tr>
</tbody>
</table>
</td>
The margin between each social buttons seams a td's style setting, try with
td {
display: inline-block;
}
JsFiddle
Related
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
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.
This question already has answers here:
White space at bottom of anchor tag
(5 answers)
How to avoid White line between img and td bottom?
(1 answer)
Closed 8 years ago.
I have been working on a simple html landing page and I can't seem to remove the white spacing mid way through the page that my image links are causing. Does anyone have a simple fix for this? Thank you.
Here is a link to the page:
https://www.facebook.com/RevivalCabs/app_190322544333196
Here is my HTML:
<body marginwidth="0" marginheight="0" bgcolor="#FFFFFF" topmargin="0" leftmargin="0">
<table id="Table_01" height="792" width="814" cellspacing="0" cellpadding="0" border="0" valign="top">
<tbody>
<tr>
<td valign="top" colspan="8">
<img height="369" width="814" border="0" alt="" src="http://i212.photobucket.com /albums/cc139/takeonecar/Kolossal_MGMT_TOP.jpg">
</td>
</tr>
<tr>
<td valign="top">
<img height="35" width="84" border="0" alt="" src="http://i212.photobucket.com/albums/cc139/takeonecar/Kolossal_MGMT_MID1F.jpg">
</td>
<td valign="top">
<a target="blank" href="https://www.facebook.com/counttofour" >
<img height="35" width="85" border="0" alt="" src="http://i212.photobucket.com/albums/cc139/takeonecar/Kolossal_MGMT_MID2.jpg">
</a>
</td>
<td valign="top">
<a target="blank" href="https://twitter.com/CountToFour">
<img height="35" width="85" border="0" alt="" src="http://i212.photobucket.com/albums/cc139/takeonecar/Kolossal_MGMT_MID3F.jpg">
</a>
</td>
<td valign="top">
<a target="blank" href="https://www.facebook.com/counttofour">
<img height="35" width="127" border="0" alt="" src="http://i212.photobucket.com/albums/cc139/takeonecar/Kolossal_MGMT_MID4.jpg">
</a>
</td>
<td valign="top">
<img height="35" width="90" border="0" alt="" src="http://i212.photobucket.com/albums/cc139/takeonecar/Kolossal_MGMT_MID5F.jpg">
</td>
<td valign="top">
<a target="blank" href="https://www.facebook.com/BATTLEGHOST">
<img height="35" width="87" border="0" alt="" src="http://i212.photobucket.com/albums/cc139/takeonecar/Kolossal_MGMT_MID6.jpg">
</a>
</td>
<td valign="top">
<a target="blank" href="https://twitter.com/BATTLEGHOSTRVA">
<img height="35" width="86" border="0" alt="" src="http://i212.photobucket.com/albums/cc139/takeonecar/Kolossal_MGMT_MID7.jpg">
</a>
</td>
<td valign="top">
<a target="blank" href="https://www.facebook.com/counttofour">
<img height="35" width="170" border="0" alt="" src="http://i212.photobucket.com/albums/cc139/takeonecar/Kolossal_MGMT_MID8.jpg">
</a>
</td>
</tr>
<tr>
<td valign="top" colspan="8">
<div style="height:100%;">
<img height="388" width="814" border="0" alt="" src="http://i212.photobucket.com/albums/cc139/takeonecar/Kolossal_MGMT_BOTF.jpg"></div>
</td>
</tr>
<tr>
<td valign="top" colspan="8">
<img height="12" width="814" border="0" alt="" src="http://i212.photobucket.com/albums/cc139/takeonecar/Kolossal_MGMT_FOOT.jpg">
</td>
</tr>
<tr>
<td valign="top" colspan="8">
<img height="12" width="814" border="0" alt="" src="http://i212.photobucket.com/albums/cc139/takeonecar/Kolossal_MGMT_FOOT.jpg">
</td>
</tr>
</tbody>
</table>
</body>
I have some problem with my e-mail campaign.
I made all my boxes with correct width, height attribute, also made the img line-height to 0.1em and display them as block, so the question is on. What is this?
Every suggestion will be honored. Thanks.
<table width="594" border="0" cellspacing="0" cellpadding="0">
<tbody><tr>
<td width="25" align="left" valign="top"></td>
<td width="269" align="left" valign="bottom">
<h1>{TITLE}</h1>
<h2>{HOTEL} {HOTELCATEGORY}</h2>
<p>{ROOM}</p>
<p>{ACCOM}</p>
<p>{START}</p>
<p>{DATESTART} - {DATEEND}</p>
<p>{DAYS} nap, {NIGHTS} éjszaka</p>
<table border="0" cellpadding="0" cellspacing="0" width="230" height="67">
<tr height="11">
<td width="80" height="11" align="left" valign="top"><img src="http://site.com/nwsltrv2/img/l_01_tl.png" width="80" height="11"></td>
<td width="117" height="11" align="left" valign="top"><img src="http://site.com/nwsltrv2/img/l_01_t.png" width="117" height="11"></td>
<td width="33" height="11" align="left" valign="top"><img src="http://site.com/nwsltrv2/img/l_01_tr.png" width="33" height="11"></td>
</tr>
<tr height="40">
<td width="80" height="40" align="left" valign="top"><img src="http://site.com/nwsltrv2/img/l_01_l.png" width="80" height="40"></td>
<td width="117" height="40" align="center" valign="middle" bgcolor="#444444"><b class="priceboxb" style="margin: 0; padding: 0;">{PRICE}{CURRENCY}</b><span class="priceboxspan" style="margin: 0; padding: 0;">/fõ</span></td>
<td width="33" height="40" align="left" valign="top"><img src="http://site.com/nwsltrv2/img/l_01_r.png" width="33" height="40"></td>
</tr>
<tr height="16">
<td width="80" height="16" align="left" valign="top"><img src="http://site.com/nwsltrv2/img/l_01_bl.png" width="80" height="16"></td>
<td width="117" height="16" align="left" valign="top"><img src="http://site.com/nwsltrv2/img/l_01_b.png" width="117" height="16"></td>
<td width="33" height="16" align="left" valign="top"><img src="http://site.com/nwsltrv2/img/l_01_br.png" width="33" height="16"></td>
</tr>
</table>
</td>
<td width="300" align="right" valign="top">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="10" height="11" align="left" valign="top"><img src="http://site.com/nwsltrv2/img/b_01_tl.png"></td>
<td width="278" height="11" align="left" valign="top"><img src="http://site.com/nwsltrv2/img/b_01_t.png"></td>
<td width="12" height="11" align="left" valign="top"><img src="http://site.com/nwsltrv2/img/b_01_tr.png"></td>
</tr>
<tr>
<td width="10" height="192" align="left" valign="top"><img src="http://site.com/nwsltrv2/img/b_01_l.png"></td>
<td width="278" height="192" class="imageholder"><img src="{IMGSRC}" width="278" height="192" class="image" style="width: 278pt; height: 192pt; border:0; margin:0; padding:0;"></td>
<td width="12" height="192" align="left" valign="top"><img src="http://site.com/nwsltrv2/img/b_01_r.png"></td>
</tr>
<tr>
<td width="10" height="12" align="left" valign="top"><img src="http://site.com/nwsltrv2/img/b_01_bl.png"></td>
<td width="278" height="12" align="left" valign="top"><img src="http://site.com/nwsltrv2/img/b_01_b.png"></td>
<td width="12" height="12" align="left" valign="top"><img src="http://site.com/nwsltrv2/img/b_01_br.png"></td>
</tr>
</table>
</td>
<td width="0" align="left" valign="top"></td>
</tr>
</tbody></table>
Looks like three pixels. What happens if you make the images that make up the label display: block; ?
Or take a look at this answer: 3px extra height on a div with an image inside it
I have this email creative. The bottom box is placed ok on ff and chrome, but in IE it's getting a bit weird.
What do I need to add/remove from my code in order for the bottom box to appear correctly?
Thanks.
here is the code:
<title></title>
<style type="text/css">
p
{
margin: 0px;
padding: 0px;
text-align: right;
}
a:link
{
color: #990000;
text-decoration: none;
}
a:visited
{
text-decoration: none;
color: #990000;
}
a:hover
{
text-decoration: none;
color: #990000;
}
img
{
border: none;
}
body{
margin:0px;
}
</style>
<div style="text-align: center; font-family: Arial, Helvetica, sans-serif; font-size: 13px;background-color: #EEF3FA">
<div style="text-align: right; font-family: Arial, Helvetica, sans-serif; font-size: 13px;background-color: #FFF;width: 720px;margin: 0px auto;">
<br />
<table align="center" border="0" cellpadding="4" cellspacing="0" dir="rtl" width="700">
<tbody>
<tr>
<td colspan="3">
<img src="Images/head.jpg" style="margin-bottom: 10px;" /></td>
</tr>
<tr>
<td colspan="3" style="border:2px #060">
<img src="Images/tophaedr1.jpg" style="margin-bottom: 10px;margin-right:23px;" /></td>
</tr>
</table>
<table align="center" border="0" cellpadding="4" cellspacing="0" dir="rtl" width="700" style="margin-right:17px;">
<!-- right -->
<tr>
<td valign="top" width="156" height="500">
<table width="156" cellpadding="0" cellspacing="0" border="0"
style="background-color: B4D336">
<tr>
<td width="14" valign="top"><img src="Images/rounded_corner2.gif" width="14"
height="14" border="0" alt="..." /></td>
<td width="172"></td>
<td width="14" valign="top"><img src="Images/rounded_corner1.gif" width="14"
height="14" border="0" alt="..." /></td>
</tr>
<tr>
</tr>
<tr>
<td width="14" valign="bottom"><img src="Images/rounded_corner4.gif" width="14" height="14"
border="0" alt="..." /></td>
<td></td>
<td width="14" valign="bottom"><img src="Images/rounded_corner3.gif" width="14" height="14"
border="0" alt="..." /></td>
</tr>
</table>
<table width="156" cellpadding="0" cellspacing="0" border="0"
style="background-color: 3778BC;margin-top: 10px;">
<tr>
<td width="14" valign="top"><img src="Images/rounded_corner2_b.gif" width="14"
height="14" border="0" alt="..." /></td>
<td width="172"></td>
<td width="14" valign="top"><img src="Images/rounded_corner1_b.gif" width="14"
height="14" border="0" alt="..." /></td>
</tr>
<tr>
</tr>
<tr>
<td width="14" valign="bottom"><img src="Images/rounded_corner4_b.gif" width="14"
height="14" border="0" alt="..." /></td>
<td width="172"></td>
<td width="14" valign="bottom"><img src="Images/rounded_corner3_b.gif" width="14"
height="14" border="0" alt="..." /></td>
</tr>
</table>
</td>
<td valign="top" width="156" >
<table width="156" cellpadding="0" cellspacing="0" border="0"
style="background-color: 3778BC">
<tr>
<td width="14" valign="top"><img src="Images/rounded_corner2_b.gif" width="14"
height="14" border="0" alt="..." /></td>
<td width="172"></td>
<td width="14" valign="top"><img src="Images/rounded_corner1_b.gif" width="14"
height="14" border="0" alt="..." /></td>
</tr>
<tr>
</tr>
<tr>
<td width="14" valign="bottom"><img src="Images/rounded_corner4_b.gif" width="14" height="14"
border="0" alt="..." /></td>
<td></td>
<td width="14" valign="bottom"><img src="Images/rounded_corner3_b.gif" width="14" height="14"
border="0" alt="..." /></td>
</tr>
</table>
<table width="156" cellpadding="0" cellspacing="0" border="0"
style="background-color: B4D336;margin-top: 10px;">
<tr>
<td width="14" valign="top"><img src="Images/rounded_corner2.gif" width="14"
height="14" border="0" alt="..." /></td>
<td width="172"></td>
<td width="14" valign="top"><img src="Images/rounded_corner1.gif" width="14"
height="14" border="0" alt="..." /></td>
</tr>
<tr>
</tr>
<tr>
<td width="14" valign="bottom"><img src="Images/rounded_corner4.gif" width="14" height="14"
border="0" alt="..." /></td>
<td></td>
<td width="14" valign="bottom"><img src="Images/rounded_corner3.gif" width="14" height="14"
border="0" alt="..." /></td>
</tr>
</table>
</td>
<td valign="top" width="156">
<table width="156" cellpadding="0" cellspacing="0" border="0"
style="background-color: B4D336">
<tr>
<td width="14" valign="top"><img src="Images/rounded_corner2.gif" width="14"
height="14" border="0" alt="..." /></td>
<td width="172"></td>
<td width="14" valign="top"><img src="Images/rounded_corner1.gif" width="14"
height="14" border="0" alt="..." /></td>
</tr>
<tr>
</tr>
<tr>
<td width="14" valign="bottom"><img src="Images/rounded_corner4.gif" width="14" height="14"
border="0" alt="..." /></td>
<td></td>
<td width="14" valign="bottom"><img src="Images/rounded_corner3.gif" width="14" height="14"
border="0" alt="..." /></td>
</tr>
</table>
<table width="156" cellpadding="0" cellspacing="0" border="0"
style="background-color: 3778BC;margin-top: 10px;">
<tr>
<td width="14" valign="top"><img src="Images/rounded_corner2_b.gif" width="14"
height="14" border="0" alt="..." /></td>
<td width="172"></td>
<td width="14" valign="top"><img src="Images/rounded_corner1_b.gif" width="14"
height="14" border="0" alt="..." /></td>
</tr>
<tr>
</tr>
<tr>
<td width="14" valign="bottom"><img src="Images/rounded_corner4_b.gif" width="14" height="14"
border="0" alt="..." /></td>
<td></td>
<td width="14" valign="bottom"><img src="Images/rounded_corner3_b.gif" width="14" height="14"
border="0" alt="..." /></td>
</tr>
</table>
</td>
<!-- space -->
<!-- left -->
<td valign="top" width="180">
<table width="180" cellpadding="0" cellspacing="0" border="0"
style="background-color: B4D336">
<tr>
<td></td>
<td align="center"><a href="http://www.shvoong.co.il/" target="_blank"><img src="Images/left.jpg" width="180"
height="188" border="0" alt="..." /></a></td>
<td></td>
</tr>
</table>
<table width="180" cellpadding="0" cellspacing="0" border="0"
style="background-color: B4D336">
<tr>
<td></td>
<td align="center"><a href="http://www.shvoong.co.il/" target="_blank"><img src="Images/left.jpg" width="180"
height="188" border="0" alt="..." /></a></td>
<td></td>
</tr>
</table>
<table width="180" cellpadding="0" cellspacing="0" border="0"
style="background-color: B4D336">
<tr>
<td></td>
<td align="center"><a href="http://www.shvoong.co.il/" target="_blank"><img src="Images/left.jpg" width="180"
height="188" border="0" alt="..." /></a></td>
<td></td>
</tr>
</table>
<table width="180" cellpadding="0" cellspacing="0" border="0"
style="background-color: B4D336">
<tr>
<td></td>
<td align="center"><a href="http://www.shvoong.co.il/" target="_blank"><img src="Images/left.jpg" width="180"
height="188" border="0" alt="..." /></a></td>
<td></td>
</tr>
</table>
</table>
<table align="center" border="0" cellpadding="4" cellspacing="0" dir="rtl" width="700">
<tbody>
<tr>
<td colspan="3">
<img src="Images/pre.jpg" style="margin-bottom: 10px; margin-left: 8px; margin-top: -20px;" /></td>
<td colspan="3">
<img src="Images/logoleft.gif" style="margin-bottom: 10px; margin-left: 11px; margin-top: -10px;" /></td>
</tr>
</table>
</div>
</div>
You might want to stop using tables for the layout.
First of all I would highly recommend to stop using <table> tags for structuring a page. Thats what <div>'s are for.
IE is known to be problematic, usually I would add custom CSS rules that only apply to IE, by using the asterisk (*) marker.
#myDiv{
position: relative;
top: 20px;
left: 10px;
*top: 15px; /* Should be read only be IE */
*left: 8px; /* Should be read only be IE */
}
Shai
I have a couple of images inside of a table (it's for an email so I've had to use tables) that are not aligning even once I have used cellpadding=0. Any ideas?
<table>
<tbody>
<tr>
<td cellpadding="0" colspan="5"><img src="http://www.tradetech.net/images/Holidayemail/tt_holiday_boat_23_01.gif" alt="" width="444" height="43" /></td>
</tr>
<tr cellpadding="0">
<td cellpadding="0" rowspan="4"><img src="http://www.tradetech.net/images/Holidayemail/tt_holiday_boat_23_02.gif" alt="" width="46" height="252" /></td>
<td cellpadding="0" colspan="3"><img src="http://www.tradetech.net/images/Holidayemail/boxes.gif" alt="" width="296" height="142" /></td>
<td cellpadding="0" rowspan="4"><img src="http://www.tradetech.net/images/Holidayemail/tt_holiday_boat_23_04.gif" alt="" width="102" height="252" /></td>
</tr>
<tr cellpadding="0">
<td cellpadding="0" colspan="3"><img src="http://www.tradetech.net/images/Holidayemail/tt_holiday_boat_23_05.gif" alt="" width="296" height="33" /></td>
</tr>
<tr cellpadding="0">
<td cellpadding="0" rowspan="2"><img src="http://www.tradetech.net/images/Holidayemail/tt_holiday_boat_23_06.gif" alt="" width="32" height="77" /></td>
<td cellpadding="0"><img src="http://www.tradetech.net/images/Holidayemail/greeting.gif" alt="" width="151" height="29" /></td>
<td cellpadding="0" rowspan="2"><img src="http://www.tradetech.net/images/Holidayemail/tt_holiday_boat_23_08.gif" alt="" width="113" height="77" /></td>
</tr>
<tr cellpadding="0">
<td cellpadding="0"><img src="http://www.tradetech.net/images/Holidayemail/tt_holiday_boat_23_09.gif" alt="" width="151" height="48" /></td>
</tr>
</tbody>
</table>
cellpadding="0" belongs inside the <table> tag, not the <td> tag or the <tr> tag.
Cellpadding does not do anything on the tag as stated above, since you are creating a HTML e-mail you need to set the width on the tags to not allow any room to move around. Just adding images doesn't help.
I've created a fiddle where the images in your layout line up perfectly: http://jsfiddle.net/Scopestyle/6Qva2/
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#ffffff">
<table width="444" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="3"><img style="display: block;" src="http://placehold.it/444x43" alt="" width="444" height="43" /></td>
</tr>
<tr>
<td width="46" rowspan="3" valign="top"><img style="display: block;" src="http://placehold.it/46x252" alt="" width="46" height="252" /></td>
<td width="296"><img style="display: block;" src="http://placehold.it/296x142" alt="" width="296" height="142" /></td>
<td width="102" rowspan="3" valign="top"><img style="display: block;" src="http://placehold.it/102x252" alt="" width="102" height="252" /></td>
</tr>
<tr>
<td><img style="display: block;" src="http://placehold.it/296x33" alt="" width="296" height="33" /></td>
</tr>
<tr>
<td width="296" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="32" rowspan="2"><img style="display: block;" src="http://placehold.it/32x77" alt="" width="32" height="77" /></td>
<td width="151"><img style="display: block;" src="http://placehold.it/151x29" alt="" width="151" height="29" /></td>
<td width="113" rowspan="2"><img style="display: block;" src="http://placehold.it/113x77" alt="" width="113" height="77" /></td>
</tr>
<tr>
<td width="151"><img style="display: block;" src="http://placehold.it/151x48" alt="" width="151" height="48" /></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
If you look at the code notice a few tricks I've used to make it work:
The HTML is nested in tables. This makes complicated cell layouts easier to manage and less likely to break.
All cells have the width of the images, so we don't allow gaps between the cells.
The images have inline styles with the display: block; attribute. This neutralizes any gaps below the image that could occur in different browsers and e-mail clients.
When testing your e-mail code, putsmail.com is a handy tool to see what it looks like in your inbox. When debugging different e-mail clients take a look at emailology.org for interesting tips.
wow I can't even imagine what you're trying to do but to remove most of the spacing add this to the <table> tag:
<table cellpadding="0" cellspacing="0" border="0">