Spacing between row in newsletter html table in Hotmail and Gmail

Question

I try to create an newsletter.

The display is perfect on web browser, perfect in thunderbird too... but in webmails like Gmail or Hotmail... I have spaces between the rows.

Here is my code :

<center><a href="http://www.itbag.fr/newsletter/03022012/" style="color:#E84691;font-size:10px;">Si la newsletter s'affiche mal, consultez la en ligne</a>
<table id="Table_01" width="731" height="731" border="0" cellpadding="0" cellspacing="0">
<tr>
    <td colspan="3" align="left" valign="top">
        <a href="http://www.itbag.fr" style="display:block;height:131px">
            <img src="http://www.itbag.fr/newsletter/03022012/images/image001_01.jpg" width="640" height="131" border="0" alt=""></a></td>
    <td align="left" valign="top">
        <a href="https://www.facebook.com/Itbag.fr?sk=app_128552947241828" style="display:block;height:131px">
            <img src="http://www.itbag.fr/newsletter/03022012/images/image001_02.jpg" width="90" height="131" border="0" alt=""></a></td>
    <td align="left" valign="top">
        <img src="http://www.itbag.fr/newsletter/03022012/images/spacer.gif" width="1" height="131" alt=""></td>
</tr>
<tr>
    <td colspan="2" align="left" valign="top">
        <a href="http://www.itbag.fr" style="display:block;height:74px">
            <img src="http://www.itbag.fr/newsletter/03022012/images/image001_03.jpg" width="365" height="74" border="0" alt=""></a></td>
    <td colspan="2" rowspan="2" align="left" valign="top">
        <a href="http://www.itbag.fr/sacs-d-occasion-de-marques/1130-sac_24h_gerard_darel_en_python_neuf.html" style="display:block;height:286px">
            <img src="http://www.itbag.fr/newsletter/03022012/images/image001_04.jpg" width="365" height="286" border="0" alt=""></a></td>
    <td align="left" valign="top">
        <img src="http://www.itbag.fr/newsletter/03022012/images/spacer.gif" width="1" height="74" alt=""></td>
</tr>
<tr>
    <td rowspan="2" align="left" valign="top">
        <a href="http://www.itbag.fr/sac-d-occasion-de-luxe/1114-cabas_burberry_beige.html" style="display:block;height:258px">
            <img src="http://www.itbag.fr/newsletter/03022012/images/image001_05.jpg" width="187" height="258" border="0" alt=""></a></td>
    <td rowspan="2" align="left" valign="top">
        <a href="http://www.itbag.fr/accessoires-co/1128-expresso.html" style="display:block;height:258px">
            <img src="http://www.itbag.fr/newsletter/03022012/images/image001_06.jpg" width="178" height="258" border="0" alt=""></a></td>
    <td align="left" valign="top">
        <img src="http://www.itbag.fr/newsletter/03022012/images/spacer.gif" width="1" height="212" alt=""></td>
</tr>
<tr>
    <td colspan="2" rowspan="3" align="left" valign="top">
        <a href="http://www.itbag.fr/accessoires-co/1107-ballerines_heritage.html" style="display:block;height:313px">
            <img src="http://www.itbag.fr/newsletter/03022012/images/image001_07.jpg" width="365" height="313" border="0" alt=""></a></td>
    <td align="left" valign="top">
        <img src="http://www.itbag.fr/newsletter/03022012/images/spacer.gif" width="1" height="46" alt=""></td>
</tr>
<tr>
    <td align="left" valign="top">
        <a href="http://www.itbag.fr/sac-d-occasion-de-luxe/1118-peekaboo.html" style="display:block;height:227px">
            <img src="http://www.itbag.fr/newsletter/03022012/images/image001_08.jpg" width="187" height="227" border="0" alt=""></a></td>
    <td align="left" valign="top">
        <a href="http://www.itbag.fr/sac-d-occasion-de-luxe/1120-muse_two_large.html" style="display:block;height:227px">
            <img src="http://www.itbag.fr/newsletter/03022012/images/image001_09.jpg" width="178" height="227" border="0" alt=""></a></td>
    <td align="left" valign="top">
        <img src="http://www.itbag.fr/newsletter/03022012/images/spacer.gif" width="1" height="227" alt=""></td>
</tr>
<tr>
    <td colspan="2" align="left" valign="top">
        <a href="http://www.itbag.fr/mon-compte" style="display:block;height:40px">
            <img src="http://www.itbag.fr/newsletter/03022012/images/image001_10.jpg" width="365" height="40" border="0" alt=""></a></td>
    <td align="left" valign="top">
        <img src="http://www.itbag.fr/newsletter/03022012/images/spacer.gif" width="1" height="40" alt=""></td>
</tr>
<tr>
    <td align="left" valign="top">
        <img src="http://www.itbag.fr/newsletter/03022012/images/spacer.gif" width="187" height="1" alt=""></td>
    <td align="left" valign="top">
        <img src="http://www.itbag.fr/newsletter/03022012/images/spacer.gif" width="178" height="1" alt=""></td>
    <td align="left" valign="top">
        <img src="http://www.itbag.fr/newsletter/03022012/images/spacer.gif" width="275" height="1" alt=""></td>
    <td align="left" valign="top">
        <img src="http://www.itbag.fr/newsletter/03022012/images/spacer.gif" width="90" height="1" alt=""></td>
    <td></td>
</tr>
</table></center> 

Here is the direct link : http://www.itbag.fr/newsletter/03022012

And here, there is two screenshots of display in Gmail and Hotmail :

Anyone can help me ?

Joviality

Answer 1

I guess there is no really answer for this webmail...

I see in this source : http://www.campaignmonitor.com/css/ that all webmails and readers understand "float"...

So in the future, à try with float column.

Joviality

Answer 2

Add style="display: block" as mentioned bellow

<img style="display: block" src="sample.gif" alt="sample" />

and also add

img { display: block }

Refer to the original post.

Metage

Answer 3

I solved a similar problem with

<td style="line-height:0"><img ... /></td>

Found on this Q&A, I am not allowed to notify potential duplicate yet.

Copilot

this solved my problem too. i always use display:block but had one random email that wouldn't work with it. line height fixed it. thank you. – Disbelief

This is the solution - the webmail software adds additional white-space to the HTML source code of the mail. This additional white-space causes the gap "between" table cells. The gap is not between the cells. But the added white space make cells grow. – Azotize

Answer 4

For future reference: please remember that your td inside same tr must have the same padding top and bottom. It happens because you're adding some space to some td's and the other are getting the space but not the style (just to the space you have defined), please add padding to them too.

It can happen with border's too.

Kolk