Proper way to handle empty <td>

I'm pretty new to HTML-newsletters and I'm hearing a lot of different methods to get empty table cells to render properly. Can someone sort this out?

Right now, I don't have anyhting in my empty table cells. I just set the width and height. This renders properly in the tests I made in Apple Mail 4, Lotus Notes 8 and Outlook 2007/2010. I'm guessing the problem is with other e-mail clients.

Anyway, should I use a spacer gif? If so how? Do I set the image dimensions of my 1x1 invicible gif to the same as the table cell should be?

Or should I use &nbsp;?
When I tried this, I got a lot of extra verticle space added. Which I removed by setting the font size to 1px and the line-height to the exakt height I wanted the table cell. I have no idea if this is good practice.

Can someone clear this up for me, so I know what's best practice.

Redferret, 1 year ago

Hi devotee, great question, a lot of sites out there still say to use spacer images but I don't think theres any compelling reason to these days.

You can usually achieve the same effect by nesting tables and using cellpadding, but if your in a situation where you can't then horizontal spacing should be fine with a single &nbsp;,

for vertical spacing add a &nbsp; then set text-size to 0px and line-height to the height of the td, then add mso-line-height-rule:exactly; to force outlook to honour it.

That's all from memory, maybe someone can clarify.

Edit: In fact, testing it on Outlook 2007 reveals you don't need the mso-line-height-rule

devotee, 1 year ago

Hi, thanks for answering.

So I take it you do think that some kind of "content" inside an empty <td> is necessary to make it render properly am I right? What clients is this needed for? I've heard outlook need this, but in my tests, I can't see anything wrong with how it renders my empty cells, where I specified width and height.

Say I want a table cell with a width of 10px and a height of 12px. Do I specify width and height aswell as the text-size and line-height, or do I just specify width + text-size and line-height? Or maybe it doesn't matter.

Also, shouldn't I be fine as long as the text size is set to something less than the line-height, not necessarily 0?

roshodgekiss roshodgekiss, 1 year ago

Hey devotee and Redferret, we have a blog post and some really interesting comments on this empty table cells issue. Hopefully that will clarify a few things for you.

As for spacer images, we generally don't use them much these days. If your cell widths add up to the table width, then they should hold their width as desired. As for heights, it's okay to use spacers, however if you can use this discussed alternative (ie. text and CSS), then that's much better than having images-off placeholders littered across your design when images are off in the inbox.

Thanks folks, I hope this has helped :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
Redferret, 1 year ago

Thanks Ros, really good article, the only caveat i'd add is that if your using a line-height the same as your font size Outlook 2007+ will use a minimum line height, If it's a font-size of 1px Outlook will impose a minimum line height of 2px, Not much, but when you get to a font size of 30px Outlooks minimum adds an extra 4px, adding mso-line-height-rule:exactly; will remove the minimum, forgive me if i'm being pedantic! :)

roshodgekiss roshodgekiss, 1 year ago

Redferret, you're being really helpful, not pedantic! :) I didn't know about mso-line-height-rule:exactly; - thank you, this is a great tip to pass on to others. Please keep sharing these tips here, even years into the game, we're still learning things...!


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor

Sign up for free.
Then send campaigns for as little as $9p/m

Create an account