Umer Javed
Reputation: 404
Padding between TDs in email template
I have written an email template, its only a set of images with hyperlinks. Its working good on my browser, but when I send it through email, it gets broken due to unnecessary padding between tds.
This is how it should render. But what I see:
And when I inspected it:
You see the unnecessary padding? Here's the code:
<html><head>
<title>Email Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (594bfefd1385a.jpeg) -->
<table id="Table_01" width="1004" height="577" border="0" cellpadding="0" cellspacing="0">
<tbody><tr>
<td rowspan="2">
<a href="https://www.thetwistedbit.com/collections/ego-7-tall-boots#utm_source=hypermail&utm_medium=email&utm_campaign=ego7&utm_term=ego7"><img src="http://thetwistedbit.net/imagehosting/5360/594eb68d7e313.gif" width="231" height="173" alt=""></a></td>
<td colspan="8" rowspan="5">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68dbb799.gif" width="411" height="445" alt=""></td>
<td colspan="5">
<a href="https://www.thetwistedbit.com/#utm_source=hypermail&utm_medium=email&utm_campaign=ego7"><img src="http://thetwistedbit.net/imagehosting/5360/594eb68db1f3f.gif" width="361" height="163" alt=""></a></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="1" height="163" alt=""></td>
</tr>
<tr>
<td colspan="5" rowspan="2">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68dd8c60.gif" width="361" height="105" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="1" height="10" alt=""></td>
</tr>
<tr>
<td rowspan="8">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68de43fb.gif" width="231" height="403" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="1" height="95" alt=""></td>
</tr>
<tr>
<td colspan="3" rowspan="2">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68e02a9f.gif" width="164" height="177" alt=""></td>
<td>
<a href="https://www.google.com/maps/place/28+N+Central+Ave,+Hartsdale,+NY+10530/@41.0195605,-73.7994692,17z/data=!3m1!4b1!4m5!3m4!1s0x89c2948a2925d351:0x84bfe9e32b3fb392!8m2!3d41.0195565!4d-73.7972805"><img src="http://thetwistedbit.net/imagehosting/5360/594eb68e23617.gif" width="72" height="73" alt=""></a></td>
<td rowspan="5">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68e25d27.gif" width="125" height="244" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="1" height="73" alt=""></td>
</tr>
<tr>
<td rowspan="4">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68e4689f.gif" width="72" height="171" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="1" height="104" alt=""></td>
</tr>
<tr>
<td rowspan="5">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68e47c27.gif" width="42" height="131" alt=""></td>
<td rowspan="2">
<a href="https://www.facebook.com/TheTwistedBitSaddlery/"><img src="http://thetwistedbit.net/imagehosting/5360/594eb68e6685e.png" width="51" height="52" alt=""></a></td>
<td colspan="5">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68e677fe.gif" width="281" height="2" alt=""></td>
<td colspan="2" rowspan="2">
<a href="https://www.facebook.com/EquestrianStyle/"><img src="http://thetwistedbit.net/imagehosting/5360/594eb68e6685e.png" width="51" height="52" alt=""></a></td>
<td colspan="2" rowspan="3">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68e877be.gif" width="150" height="67" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="1" height="2" alt=""></td>
</tr>
<tr>
<td rowspan="4">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68ea96be.gif" width="89" height="129" alt=""></td>
<td>
<a href="https://www.pinterest.com/thetwistedbit/"><img src="http://thetwistedbit.net/imagehosting/5360/594eb68eab5fe.gif" width="51" height="50" alt=""></a></td>
<td rowspan="4">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68ec9295.gif" width="15" height="129" alt=""></td>
<td>
<a href="https://www.instagram.com/TheTwistedBit/"><img src="http://thetwistedbit.net/imagehosting/5360/594eb68ecb9a6.gif" width="50" height="50" alt=""></a></td>
<td rowspan="4">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68eeadad.gif" width="76" height="129" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="1" height="50" alt=""></td>
</tr>
<tr>
<td rowspan="3">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68eebd4d.gif" width="51" height="79" alt=""></td>
<td rowspan="3">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68f15f75.gif" width="51" height="79" alt=""></td>
<td rowspan="3">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68f16f15.gif" width="50" height="79" alt=""></td>
<td colspan="2" rowspan="3">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68f37e75.gif" width="51" height="79" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="1" height="15" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68f36aec.gif" width="62" height="64" alt=""></td>
<td colspan="3">
<a href="https://www.thetwistedbit.com/#utm_source=hypermail&utm_medium=email&utm_campaign=ego7"><img src="http://thetwistedbit.net/imagehosting/5360/594eb68f589ec.gif" width="285" height="25" alt=""></a></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="1" height="25" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68f5a15d.gif" width="285" height="39" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="1" height="39" alt=""></td>
</tr>
<tr>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="231" height="1" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="42" height="1" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="51" height="1" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="89" height="1" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="51" height="1" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="15" height="1" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="50" height="1" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="76" height="1" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="37" height="1" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="14" height="1" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="62" height="1" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="88" height="1" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="72" height="1" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="125" height="1" alt=""></td>
<td></td>
</tr>
</tbody></table>
<!-- End Save for Web Slices -->
</body></html>Please help, Thanks in advance.
Upvotes: 0
Views: 131
Answers (1)
Syfer
Reputation: 4479
I take it this is the first email you have built? It is not padding, its the display block that is missing from the images. Use the below code for all images in the html:
style="display:block;" hspace="0" vspace="0" alt="" border="0"
Note: Since you have so many colspan and rowspan the template might not work properly in some email clients. The above code will ensure all your images are sitting flush against each other.
A word of advice not to be taken lightly:
- Never do Save for web from Photoshop. It creates table that is not fixable most of the time.
- Don't use col span. Some email email clients don't like it.
- Only image emails will have delivery problem, general rule is to have 70/30 (some day 60/40) to get best results.
- Use media queries or Gmail fix or your emails will look really messed up in Gmail apps.
Let me know if the above fix works.
Cheers
Upvotes: 1
Related Questions
- HTML table with TD padding in email
- HTML email, remove spacing between tr tags?
- Padding issue on HTML email
- Add Spacing to TD in Outlook (HTML Email)
- Space between td's in my table?
- First time with tables/html email - text padding issue
- Cellpadding alternative in <td> for email template
- Removing table td space in a html email
- HTML email - td not aligning properly
- Html email Template <td> Spaces around images