Is it true that newsletters in HTML should have a “table-based” layouts?

Question

I read somewhere that when creating a HTML email, you should use the table-based layout. You should not care about creating tableless css based layout. Is that true? I have to create a newsletter layout for my company, but I dont feel confortable writing 3 nested tables.

Answer 1

If you want your HTML-email to look good in most email clients, you should write your HTML as it still was 1999 :)

Answer 2

I'd highly recommend paying a visit to the Email Standards Project website. It lists almost every major email client (both standalone and web-based) on the market and outlines how much HTML support is built into each one.

Also check out Campaign Monitor's email design guidelines for some practical guides for proper HTML email building -- including, sadly yes, "use tables."

Answer 3

This is probably more based on the reality of email client rendering (which is terrible) than anything else. Technically it's almost certainly wrong, but pragmatically it might be the best advice. Truppo touches on this.

Answer 4

I would love a world where no one expected HTML to be used where plain text would do, but that is not the situation. If your job is to come up with HTML that will not embarrass you when your subscribers try to view it in their favorite email clients (applications or web based email), it is hard to stick with semantic markup and CSS.

Take what I am saying with a grain of salt because I have only done this as a learning exercise and not professionally. Based on an article I had bookmarked and further links I found in that article, the following pages seem to have a good discussion of the real issues involved in sending HTML email.

http://www.sitepoint.com/article/code-html-email-newsletters/

http://www.sitepoint.com/article/principles-beautiful-html-email/

http://www.sitepoint.com/article/designers-guide-html-email/

Given the issues involved, using tables for layout makes practical sense.

Answer 5

There's certainly no standard that mandates it, and in fact, best practices dictate that tables should not be used for layout (except in the case of laying out tabular data).

There is an argument to be made for using tables in presentation, as there's no guarantee the plethora of desktop and web-based email clients will render CSS-based presentation properly... However, I wouldn't say that's an argument in-and-of itself.

Answer 6

I won't advise you to do it, but you had probably hear this because a lot of email reader supports only a few html and css. They often don't bundle a full html/css parser, and in the past table was much used to do layouts..

Answer 7

You may want to look at this, although this is specifically about the Oulook html/css subset support described:

http://msdn.microsoft.com/en-us/library/aa338201.aspx

Answer 8

The reason tables are used is two-fold:

1. HTML e-mail can be rendered in a vast array of clients with widely differing abilities. It's like trying to design a website for every browser, then multiply it by 10.
2. Quite a few web e-mail clients play havoc with CSS layout.

Answer 9

I found outlook having problem with div based layouts.

Answer 10

We've been doing some tests with customers on how newsletters look on their computer and found that a majority is using a layout in Outlook or in Mail that shows a width of only about 45 characters. They don't bother to double-click to open the email in a new window or scroll around. The emails with some content other than a logo and text that appeared somewhat better were the ones with only one big GIF...

Answer 11

+1 on Campaign Monitor's advice. I've also seen a lot of great content from Emma. In my experience, the simpler you can make an email newsletter template, the better. This is doubly-true in a world where an increasing percentage of users are reading your message on a mobile device with a small screen.

Answer 12

In the past it was common to use tables for page layout, and many people who create pages are still more comfortable doing it this way.

As James says, best practice is to use CSS positioning facilities for page layout except when it actually is tabular data; but personally I often find it hard to get the effects I want with CSS.