Best practices for table-based layouts

CSS-based layouts, which rely on div and span tags to implement element positioning and styles are not supported in email. Instead, you can use HTML tables to lay out and structure email content. The following table-based best practices help you lay out your emails with precision while maintaining reliable rendering.

Define widths

Always define table widths (in the <table> tag) and cell widths (in <td> tags). Ensure that the cell widths add up to the table width. Table width is not required, but it can help to keep cell widths correct. If the width values in your table are missing or inaccurate, email clients can render the table improperly.

Avoid heights

The height attribute in tables is deprecated and unnecessary because the content defines cell and table height.

Delete extraneous spaces

Remove extraneous white space characters in td tags, which can cause rendering issues. Make sure that the opening and closing td tags don't enclose spaces. For example, use […table cell content here.</td> ] instead of [ …table cell content here. </td> ].

Simpler is better

Limit the use of colspans, rowspans, and nested tables to simplify your code and make it easier to edit, modify, and troubleshoot.

Background color

If you want your entire message to have a background color, don’t specify it in the body tag. Several email clients strip out body tag definitions. Instead, wrap your message content in one table and specify the width as 100%. Define the background color in the table tag. For example: <table width="100%" bgcolor="#0000ff" cellpadding="0" cellspacing="0" border="0" >.

Control spacing with tables

Don't use CSS margins and padding because they are not consistently supported across email clients. In general, avoid situations where precise spacing is required. However, if you must control spacing around elements, use table cells.

Provide space around your text

Certain table layouts can be broken if text content pushes the boundaries of a table cell. Avoid squeezing too much text in table cells when spacing is crucial. Provide space to accommodate the way different browsers and email clients handle spacing.

Stack tables

For layouts that require complex table structure, simplify the code by separating the content into stackable tables. This approach reduces the need for colspans, rowspans, and nested tables, which can become difficult to work with. For example, if you need to edit a table to change the layout, use stacked tables to focus on the affected area. You can edit the table structure without changing colspan and rowspan values throughout the code.

The following example shows the basic code that is required to create a two-column layout, with a header that spans both columns.

<table width="700" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="700" colspan="2"> </td>
</tr>
<tr>
<td width="200"> </td>
<td width="500"> </td>
</tr>
</table>

You can create the same layout by using the following stacked table approach. When you apply this concept to a complex layout, you can simplify your code and revision cycles.

<table width="700" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="700"> </td>
</tr>
</table>
<table width="700" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="200"> </td>
<td width="500"> </td>
</tr>
</table>