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.
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.
|AOL Desktop 10.1|
|Lotus Notes 6.5|
|Lotus Notes 7|
|Lotus Notes 8|
|Windows Live Hotmail|
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.