HTML Email Design Tips – How to Layout Your Email With Tables

With HTML, you can not simply set margins, page size and so forth as you can with MS Word. Instead, the email layout should be set up using tables. Here is an overview.

Laying our your Email with HTML Tables

Each email client (where yo read your email – Outlook 2003, Outlook 2007, gmail.com or yahoo.com for example) has its own HTML 'rendering engine' – which means that each email client displays HTML a bit differently. Email clients including Outlook and Gmail do not consistently support properties like float, setting margins and padding. As a result, the best bet when designing HTML emails is to lay out a 'page' or email using nested tables for the layout and positioning of your email. Table nesting will give you more consistent results across email programs.

For example, to create a two-column newsletter-style email, create a table for the header, a table for the content section and a table for the footer. Then use HTML table attributes to control how the tables are displayed. Finally, wrap these three tables in a container table and set the width to 100%. The diagram below shows how this look – we have a 'container' table that has a table for the header, a table for the footer, and a table in the middle for 2 columns of content. Note there are * 3 * columns for this table – a thin table cell is used to create the gutter between the two columns.

Set Widths in Each Cell, Not in the Table

Continuing with the previous example, when combining TABLE WIDTHs, TD widths, TD padding and CSS padding into an email, the final result is different in almost every email client. The most reliable way to set the width of your table is to set a width for each cell, not for the table itself. Here is an HTML code example (NOTE: the HTML open and close brackets <and> have been replaced with [and] so they display:

[table cellspacing = "0" cellpadding = "12" border = "0"]

[tr]

[td width = "300"] [/ td]

[td width = "24"] [/ td]

[td width = "300"] [/ td]

[/ tr]

[/ table]

Be sure to set a cell width for each cell in the table because the email clients will not reliably figure out a default width. Also, avoid using percentage based widths (except for the outer 'container table'.) Clients like Outlook 2007 do not respect them, especially for nested tables. Stick to setting the width explicitly in pixels. If you want to add padding to each cell, use either the cellpadding attribute of the table or CSS padding for each cell, but do not combine the two.

Setting Body Background Colors

Since many email clients strip your HEADERS and BODY tags, assigning a background color in the BODY or HEAD tag as an embedded CSS STYLE section is pretty fruitless. To work around this, wrap your entire email with a 100% width table and give that a background color like this:

Hi There!This is a 'hello world' email showing a basic table with a background color.

[/ td]

[/ tr]

[/ table]

Background Images in Tables

Using background images is very popular for websites and to some extent emails. However, there is so much inconsistency in the way email clients display background images, that it is best to avoid background images in tables. Outlook 2007/2010 for example, do not support background images in tables.

If you still want to use background images, always provide a background color style to display instead. For example, if your design has a background image that is mostly blue, set the background color to a similar color for email clients like Outlook 2007 and 2010 that will not display your background images.

Avoid Whitespace in Table Cells

Where possible, avoid whitespace (spaces, table, carriage returns) between the tags. Some email clients like, Yahoo! and Hotmail can add additional padding above or below the cell contents in some scenarios, breaking your design for no apparent reason.

Email (Table) Width Matters

Keep any tables to a maximum of 600 -720 pixels wide. The message display window of most email clients is about 600 pixels wide and keep in mind that many people now view their email on a mobile browser, so using anything wider means that your recipient needs to scroll back and forth in order to display it. Larger screens mean the appropriate width is expanding slightly but if you want your content to be seen, the best bet is to keep it within 600 -720 pixels.

Building WikiProgramming has been both a personal and professional dream since I was 16. The best way to learn is to teach - and this project allows me to learn while helping others. Its a win win and a way for me to give back. I appreciate any and all support!

Wikiprogramming was developed as a tool for programmers regardless of level; as a place to build a solid foundation of programming languages by using our many tutorials for beginner or intermediate programmers or to use as a point of reference for more advanced work. The concept is to increase the accessibility of learning programming languages and to consolidate them in one place. Wikiprogramming hopes to one day change the way the world learns to program and to enable any one to make his or her ideas a reality.