HTML Emails - Empty Tables/TR/TD as spacers

Question

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 possible.

Solution 1

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>

Solution 2

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>

Solution 3

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.

Comments

[Jacob Mattison]

Can't you use CSS margins, padding, or relative positioning instead?

[head in the codes]

I'm sorry to say that this doesn't seem to work with Apple's Mail application (Version 6.3 (1503)). Any suggestions on how to fix this there?

[head in the codes]

Not to worry. I fixed it in my 3-cell-wide table (empty, filled, empty) by using   in each empty cell and adding a row on the bottom with a single column spanning all 3 cells using colspan=3.

[klewis]

Does anyone know if we can get away with setting width on empty td's to 100% width, so that the parent table attributes can have one width attribute to control how wide things need to be?