Tables: A Secret to Coding Emails that Work Across Email Clients

Tables are an essential part of HTML e-mails. Despite the world (slowly) moving towards CSS for formatting and away from tables, HTML e-mails are not (yet, anyway).

So those fancy “div” tags with their fancy absolute and relative positioning is out of the question for HTML e-mails. It’s a pity, as these CSS tools are fantastically powerful.

So we’re stuck with old fashioned tables. Admittedly, they’re not anywhere near as powerful as the above-mentioned tools, but they can be fiddled with enough to make your e-mails look exactly as you want them to…in all e-mail clients!

The first thing to understand about tables is the power of nested tables. Although I do suggest not using any nested tables at all, let’s face it: they get complicated really fast If you are going to use nested tables, you should try to not go deeper than three tables deep.

The next thing to consider about tables is the ability to use them as a replacement for padding and margins. This HTML capability is severely impaired by e-mail clients. I wish it wasn’t, but since it is, we must find a workaround.

How can you use simple table attributes to add padding?

Empty table cells. Very simple: just include a completely empty table cell (with the exception of a “nbsp” space) and set either its width or height. Voila! Padding.

Vertical alignment can also add “padding” to your table. This attribute can be set by using a “valign” attribute or an inline CSS style (style=”vertical-align:XXX”). Now, you can set the height of your table cell to whatever you please. Then set the vertical alignment so that the content of the cell goes to the top, bottom, or middle of your cell (depending the desired result). Now you have extra space in your cell without using any padding or margin attributes!

Have you ever tried using column spans (“colspan”) and row spans (“rowspan”)? These magical attributes allow you to create a special designated table cell in a table for, say, left padding of a certain amount. But in table cells that contain content that you don’t want indented because it contains, for example, a horizontal rule, you can use a column span or row span. This allows you to create a consistent-looking table without fussing with nested tables. You can also use column/row spans to have a table of contents next to a big picture, one single long column next to content that can act as padding. This sounds more complicated than it actually is.

But tables can also be used for other creative purposes. Tables accept colored backgrounds. In some clients, they also accept image backgrounds. The problem is, some clients (e.g. Outlook 2007) will not display image backgrounds. Sometimes, I’ll use an image background with a color background tag in addition. This way, if the image isn’t displayed, I have the colored background there just in case.

Sometimes we’ll use a table’s colored background to make a border around another table or a block of text. To do this, make a table with a background, then nest another table inside of it. Specify the width and height of both tables so that the table with the background is a certain size wider and taller than the nested table. This will allow you to specify the exact width of your colored border. Don’t forget to set the nested table’s background as a different color, also, or else the background of the first table will come through.

Hopefully I offered you some interesting ideas. Have any creative ways that you use tables? Comment using the form below!