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

Published January 28, 2009 by David Greiner

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
Apple Mail
Entourage 2008
Lotus Notes 6.5
Lotus Notes 7
Lotus Notes 8
Outlook 2003
Outlook 2007
Thunderbird
Windows Mail
Web-based
AOL Web
Gmail
MobileMe
Windows Live Hotmail
Yahoo! Mail

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.

14 Comments

Posted in: Tips & Resources

14 Comments

Wayde Christie
January 28, 2009 7:07pm

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
January 28, 2009 8:09pm

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
January 28, 2009 8:27pm

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
January 28, 2009 8:54pm

@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
January 28, 2009 9:10pm

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
January 30, 2009 4:48am

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
February 5, 2009 4:38am

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
February 5, 2009 6:37am

Thanks again for the ongoing testing and support!
Alex F.
February 5, 2009 6:57am

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
February 5, 2009 8:43am

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
February 6, 2009 4:55am

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
February 7, 2009 12:59am

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
February 9, 2009 9:45am

@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
February 13, 2009 9:53am

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.

Blog