Home → Enterprise Level Features → HTML Basics → Rely on Tables
2.2. Rely on Tables
Updated 11.13.13
Because clients like Gmail and Outlook 2007 have poor support for float, margin and padding, you'll need to use tables as the framework of your email. While nested tables are widely supported, consistent treatment of width, margin and padding within table cells is not. For the best results, keep the following in mind when coding your table structure.
Set the width in each cell, not the table
When you combine 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.
|
<table cellspacing="0" cellpadding="10" border="0"> |
Never assume that if you don't specify a cell width the email client will figure it out. It won't. Also avoid using percentage based widths. Clients like Outlook 2007 don't respect them, especially for nested tables. Stick to 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 never combine the two.
Err toward nesting
Table nesting is far more reliable than setting left and right margins or padding for table cells. If you can achieve the same effect by table nesting, that will always give you the best result across the buggier email clients.
Use a container table for body background colors
Many email clients ignore background colors specified in your CSS or the <body> tag. To work around this, wrap your entire email with a 100% width table and give that a background color.
your table is to set a width for each cell, not for the table itself.
|
<table cellspacing="0" cellpadding="10" border="0"> |
You can use the same approach for background images too. Just remember that some email clients (like Outlook!) don't support them, so always provide a fallback color.
Avoid unnecessary whitespace in table cells
Where possible, avoid whitespace between your <td> tags. Some email clients (ahem, Yahoo! and Hotmail) can add additional padding above or below the cell contents in some scenarios, breaking your design for no apparent reason.