I would like to preface this article by stating that I use standards-based markup to build my HTML emails and my websites. But for those of you who are familiar with other articles posted here at Campaign Monitor about HTML emails will know that standards-based markup results in formatting not unlike rich-text format (RTF) in many popular email clients. I’m comfortable with this and so are my clients. Well, they are once they learn about how web standards ensures accessibility and cross client/platform/device content-compatibility and helps emails reach legitimate subscribers without being eradicated by spam filters.

But not every web designer has the grace and charm of Mark Wyner, and therefore many face clients and bosses who demand they build HTML emails for design integrity at any cost. (Oh how this reeks of the “browsers vs. web-standards” battles of old.)

So for those of you who must use tables in your HTML emails, I have some information about how they perform across the board. I ran some tests and discovered that, while I couldn’t find a perfect solution, I did manage to collect some useful tips to make your tables behave for the most part.

Table Math, Meet Box-Model Math

So it turns out that when one places table widths, td widths, td padding and CSS padding into a blender, the results are quite chaotic. Inconsistent, to the say the least. Take, for example, the following table:


<table cellspacing="0" cellpadding="0" border="0" width="400">
<tr>
<td width="100"></td>
<td width="300"></td>
</tr>
</table>

Just as intended, the resulting width of this table is 400 pixels and the width of the columns are 100 and 300 pixels:

[screen shot]

But when some padding is added—via either CSS or HTML—the widths of the columns are compromised:

However, when table width is kissed good bye, the results are not unlike a CSS box model. If padding is added to the original example and the table width is removed, the code looks like this:


<table cellspacing="0" cellpadding="10" border="0">
<tr>
<td width="80"></td>
<td width="280"></td>
</tr>
</table>

And, as intended, the resulting widths are correct for both the table and the columns:

But note how the td widths were reduced to accommodate the new padding. This is just like the CSS box model in which 100 pixels wide + 10 pixels padding = 120 pixels total.

Nested Tables

If a table is nested inside another, the aforementioned rules apply with the exception of a couple important variances:

Clients Tested

Webmail

Desktop

So there you have it. Please do your best to educate your clients/bosses about how the benefits of standards-based markup far outweigh design integrity across the board. But if you fall short of convincing them and are forced to use tables for layout, take note of the lessons outlined herein. You’ll save yourself a nasty headache.

Send beautiful email campaigns Campaign Monitor makes it easy to attract subscribers, send them beautiful email campaigns, and see stunning reports on the results. GET STARTED FOR FREE
  • http://www.propellerglobal.com Damien Buckley

    Mark you’re scaring me. Tables send a shudder down my spine. Brrr

  • http://www.freshspace.co.uk Darren Nicholls

    Whom, interesting comments about padding etc. Though the comments on using tables in the first place is a bit smug for my liking. Have you passed the same judgement to the new MailBuild templates, which as you’ve probably seen are built around tables.

  • http://www.campaignmonitor.com/ Dave Greiner

    Darren, Mark actually designed all the new templates himself. He’s got both sides of the table covered (how good was that pun).

  • Jason Powell

    Mark, Interesting differences with padding and nesting. Thanks for the tips. I’m concerned about the design integrity comment. I can see that if a design was “broken” because tables didnt display correctly, then that could harm integrity of a design, or even a brand, but if you could provide some examples of how “standards compliant” code outweights design integrity I’d be very interested in that. Haven’t you found as many display differences among email clients when using CSS positioning, etc.?

  • Jerk

    Mark, I understand your bent for standards and completely agree. I adhere strictly on every website I can. However, I have much trouble coming anywhere -close- to standards with mail. The designs I am working on require cross-platform support (pretty much everything but Notes and Eudora) with a complex mixing of copy and design.

    I am in the position where I essentially get handed a design and and I need as close a 100% translation as possible, something I just don’t think is possible without violating standards in the wild west of email client compatibility.

    How do you stick to standards? Do you compromise on design or have some neat tricks?…Magic wand?

  • Kilgore Trout

    Why all the fuss over tables in emails? If you know what you’re doing and it works then why use CSS that falls apart in Outlook 07 and Live Mail. Tables and shims forever!

  • Toemouse

    I Agree with Kilgore Trout. When it comes to html emails Table-me-up. But as for the shim, you should be ashamed for even admitting to the use of them, let alone the actualy practice of doing so!

  • Bill NZ

    Unfortunately, for 90% of my clients (agencies) design integrity is paramount, so I have to keep the CSS to a minimum (text formatting only). And even that doesn’t guarantee that the design will stand up (the most popular ISP in New Zealand, Xtra, has webmail that drops all CSS text attributes and renders everything as 11pt Verdana Black).

    Late last year, I thought we were coming along nicely as the most popular desktop email clients handled CSS reasonably well, with the exception of Hotmail and Gmail. Then Outlook 2007 and Vista Mail came along, and sent us back to the late 90’s as far as standards-compliance goes.

    So, it was back to tables for us. This means CSS as close to the element as possible (since some clients mess up the cascade), sparing use of padding and margins, and no more CSS backgrounds. I find that on the majority of webmail clients TD padding is ignored, and collapses making the design look cramped (and DIVs are out of the question as any useful styles that you would put on a DIV are ignored on too many clients).

    I long for the day that I can make standards-compliant emails, but I’m afraid we’re still about 5 years (or longer if MS gets its way) before I can safely use CSS effectively.

  • http://www.freshspace.co.uk Darren Nicholls

    @Mark, I was having a bad day so perhaps I was being a touch sensitive. I’m drinking Ginger & Lemon tea to chillout!

  • chris

    Hey there,

    I know that we always talk about using tables in emails/webpages etc as bad, but when we talk about it breaking standards, we’re not talking about causing HTML or XHTML to be invalid, are we?

    Can someone please clarify this, for me. Thanks.

  • Kilgore Trout

    Mark, using tables ensures accessibility in a vast cross section of email clients, like Outlook. CSS sort of does, but not compared to tables. And Toemouse, I dont apologize for using shims. They make my tables tight as a weave. Respect the shim.

  • http://www.banane.com/workblog Anna

    Thanks for the clear example of table widths versus column widths and cross platform testing!

  • Forest

    Interesting analogy about including Spanish in automated telephone systems. One could also argue that this is akin to using browser hacks or HTML tricks to accommodate multiple software programs, and that having a standard national language would simplify the automated system design process, just as having web standards simplifies the web design process. I dont think the analogy works for web usability, because there are no obvious (to me) software standards issues with telephones. They just work. Multiple language options can also be added to websites, but that doesn’t have much to do with the browsing software or the software’s compliance to web standards. I agree that accessibility is important, but I must weigh it on a client by client basis. Now if I could only get my HTML email tables to format correctly…

  • dave

    I’m curious about cellspacing. I’ve recently tried using it and it seems to work great across the board except in the new gmail code. Have you ran into this?

  • jenny

    I second the last comment about cellspacing in gmail–but only on the Mac platform. I’ve always tested my e-mails before deployment, and now I’m noticing that old e-mails I had sent are showing up formatted badly–cellspacing-collapsed and padding disappeared. But only on gmail viewed in Firefox, Camino, or Safari on the Mac. But perfectly fine on PC’s–outlook, gmail, hotmail, yahoo, comcast. What’s up? By the way, I am of the camp that believes in consistent appearance across all e-mail providers rather than sticking strictly to standards… so yes, I use tables in my html e-mails.

  • http://www.campaignmonitor.com/ Dave Greiner

    Jenny, we just wrote about the different versions of Gmail here. There are actually 4 different versions to content with, all with different rendering.

  • http://www.dan123.co.uk DAn

    I have tested these 3 cases and table 2 and table 3 display idenically [as you describe it in case 2]. Any ideas?

  • DAn

    Ignore my previous message. I made a mistake.
    Great article but I think we have better control using empty cells than using padding.

  • http://www.netpokerinfo.com Rules

    I’m concerned about the design integrity comment. I can see that if a design was “broken” because tables didnt display correctly, then that could harm integrity of a design, or even a brand, but if you could provide some examples of how “standards compliant” code outweights design integrity I’d be very interested in that.

Want to improve your email marketing? Subscribe to get tips on improving your email marketing delivered to your inbox.
X

Join 120,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free