HTML Emails - Empty Tables/TR/TD as spacers

Has anyone had any experience with using empty tables, table rows or table cells as layout spacers?

I've been testing out my HTML email in various email clients (Mail, Entourage, Gmail, etc.) and Gmail seems to react to empty table cells differently (not accounting for them at all). I've messed around with using "empty-cells: show" in the table's CSS as well as non breaking spaces but still no luck. I definitely want to stay away from use of images as spacers if po开发者_如何学Gossible.

If you want to use empty TD-s instead of spacers you should provide width and height as well like this:

<td width="111" style="font-size:1px;line-height:21px;">&nbsp;</td>

You can see here that I used line-height for setting the table cell height and not height="21". This will render propertly in all major browsers and email clients even the older ones, like lotus notes. Just make sure that the font-size is always smaller than the line-height.

This way you'll never have to use spacers any more. One more thing. In TR you don't need to put anything except when there are pictures inside TD-s. Gmail have some issues with rendering pictures so I fixed it this way:

<tr style="font-size:0px; line-height: 0px;">
<td width="135" valign="top" align="left" height="120" >
<img width="135" height="120" border="0" alt="" src="image source here">
</td>
</tr>

Some email clients will collapse an empty cell even if it contains a space or even if it's dimensions are assigned. But I've found that if you put an empty table within a empty table and assign dimensions to only the parent, all clients will respect that the parent table is not empty because it contains another table, thus it works across all clients and devices.

To further improve compatibility it's best to define the necessary dimensions using primarily cellpadding and the least amount of height on the row but more than 3px. The td should be larger than 3px because anything under 3px may be ignored. But should be as close to 3 px because if you get your dimensions via the cellpadding, cellpadding is more respected than the row height will be.

For example if I want a space that's 18px tall I'd assign cellpadding 7 and td height 4 which comes out to (7 * 2) + 4 = 18.

<table border="0" cellpadding="7" cellspacing="0" width="100%">
    <tr>
        <td height="4">
            <table border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <td></td>
                </tr>
            </table>
        </td>
    </tr>
</table>

Well with using   instead of a spacer, you are always stack to specify line-height with a style tag, if you do not   will default to 20px line-height.

Use   to "fill" the space in the empty cell.