Nested tables in HTML email: how much is too much?

These days it's common knowledge that if you want consistent results across popular email clients, it's tables and inline CSS all the way. To complicate things further, support for margin and padding, the cornerstone of any layout, is also terribly supported and requires a number of small hacks to get the basics right. This doesn't leave us with a whole lot of options, and the most popular technique I see this days is the practice of nesting HTML tables.

I feel a little dirty endorsing this approach, but completely understand that your client doesn't care how you build the email. It better look pristine on the bosses version of Lotus Notes or you're not getting paid. It's that simple. Add to the mix the fact that some clients want stacks of content included in the design, and you're left with quite the challenge.

This led me to the question... how much nesting is too much? Most browsers can support a huge number of nested tables, but a browser Lotus Notes is not. I decided to put together a test email with no less than 15 nested tables to see if there was some kind of nesting limit imposed by any email clients.

The test page

My test page was a simple one. I just nested tables starting from a single table, right down to 15 of them. I then fired them off to our usual test suite to see if any of them would choke on the higher numbers.

Results

In the end, the results weren't too surprising. Any email client that renders email with a web browser is bound to handle nested tables effortlessly. Because of this, earlier versions of Lotus Notes choked once we hit 8 levels deep. You can see how it handles the 8 deep limit in this screenshot from Lotus Notes 7. Surprisingly, the Word rendering engine in Outlook 2007 handled the 15 deep table perfectly.

The numbers in the table below represent the levels of nested table depth each email client correctly rendered.

Email client 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
Desktop
AOL Desktop 10.1 Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
Apple Mail Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
Entourage 2008 Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
Lotus Notes 6.5 Yes Yes Yes Yes Yes Yes Yes Yes No No No No No No No
Lotus Notes 7 Yes Yes Yes Yes Yes Yes Yes Yes No No No No No No No
Lotus Notes 8 Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
Outlook 2003 Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
Outlook 2007 Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
Thunderbird Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
Windows Mail Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
Web-based
AOL Web Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
Gmail Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
MobileMe Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
Windows Live Hotmail Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
Yahoo! Mail Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes

Recommendations

The majority of designs I see sent through Campaign Monitor every day rarely go beyond 3-4 levels deep, so it's safe to say that you can rely on the nested table approach when designing HTML emails.

Every email client I tested supported up to 8 nested tables before any problems surfaced. If your email design requires more than 8 nested levels, maybe it's the design that should change instead of how you go about coding it.

Posted by David Greiner

14 Comments

  • Wayde Christie
    29th January

    Considering I completely ignore Lotus Notes, for me this post could have been summed up by saying “nested tables: good across the board”.

    Seriously though, I really appreciate the amount of effort you guys go to with your testing. Means I can all together avoid feeling dirty - except for those special, private times while watching ‘Lost’.

    Mmmmmm… Sawyer… Kate! I mean Kate!

  • Damien SANCHEZ
    29th January

    Hello !
    It’s very interesting but when you say that Lotus Notes doesn’t render nested tables properly, which kind of problems have you seen ?

    Thanks for your answer.

  • George
    29th January

    That’s good. Lotus Notes, what’s that?

    In an unrelated issue, one that you might bring up on the blog or elsewhere, is that Gmail apparently cannot handle shorthand CSS for the font property. For example:

    font:normal 16px/1.4 Arial, Helvetica, sans-serif:

    This made Gmail choke in a recent email of mine, and the text defaulted to the ancestors’ declaration as far as I remember.

    Also, there are two different versions of Gmail that act differently. You have the regular Gmail, and then you have the dumbed down version that you access through iGoogle. Support for CSS is not as good in the latter.

  • David Greiner
    29th January

    @Damien, great question. I’ve updated the post with a link to the Lotus Notes 7 screenshot so you can see it in action. You can check that out here.

    @George thanks for sharing that problem with Gmail and shorthand CSS we’ll definitely look into it. The different versions of Google is definitely a problem, especially when you consider the fact they each version also renders differently depending on the browser you’re using. They don’t make it easy for us that’s for sure.

    @ Wayde Awesome and scary. Thanks.

  • Yannick
    29th January

    I never nested more than 3 table inside each other in a design so far. I try to avoid nesting too many levels as Lotus notes doesn’t handle them really well. I don’t mean only the nesting but table dimension as well. if you don’t specify every dimension properly in every cell most often in breaks the layout (especially 6.5). Sometimes if you specify the dimension it breaks the layout as well.

    Testing is as always in order as the problem of nested tables doesn’t depend only on the number of tables.

  • susan
    30th January

    I find this quite ironic since Lotus Note’s lack of support for colspan is why one would nest tables in the first place. Don’t think I’ve ever gone beyond five levels though! I only wish I could ignore this email client,.

  • Brian
    5th February

    Thank you for the complete confirmation.  I’ve pushed for nested tables on everything, and this again is proof that it’s simply the best & most compatible way to design emails.

  • Ward
    5th February

    Thanks again for the ongoing testing and support!

  • Alex F.
    5th February

    Thanks - very helpful post. I’ve been using this approach for a while now and haven’t had any issues with major layout pieces of designs - it’s always just a case of inline styles (like fonts and link colors) not being rendered correctly - usually in GMail.

  • Manny
    5th February

    Thanks for scrutinizing the nested table theory.  Safe to say nested tables are “in”.
    Are there any sort of stats where you can see the percentage of users who use Lotus Notes?

    Thanks for you good work.

  • Kevin
    6th February

    Nesting tables is a way of life when building emails. Did you try nesting tables that contained images? Last year we ran into an issue with Hotmail where it seemed a certain level of nested tables (or divs) caused the image to “pop” out of the container element. In the end we solved the problem by applying style=“display:block” to each image tag. We put it on the image tag to retain control when aligning with active text.

  • Adam
    7th February

    Unlickily, but luckily for the sake of testing email rendering, I work for a company that uses Lotus Notes, so we’re pretty much testing with the worst case scenario everyday. Were there any findings for how complicated the nested tables could be, ie, 3 nested tables, the second of which might have 2 columns, and the third of which might have 3 rows and two columns?

  • David Greiner
    9th February

    @Kevin and @Adam, our test email was quite simple, we didn’t test any overly complex nesting scenarios. It’s definitely an idea for a follow up test that we can consider some time in the future. If you have any specific examples of problems you have seen, please share them here.

  • Jeff
    13th February

    Interesting research.

    One thing I’ve noticed is that GMail, when grouping multiple emails into a conversation, starts to break tables. I’m not sure if this is a nesting thing or just tables in general.

    I haven’t found anything to change the ways the tables work to fix this, but I believe that changing your subject line will prevent GMail from grouping emails into a conversation.

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

Create an account