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.
In the WYSIWYG editor, table dimensions are defined in the table properties. To modify table properties, complete the following steps.
- Open your email.
- Click into the email body.
- Click in the table that you want to edit.
- Right-click (or Ctrl+click on a Mac) in the table and select Table Properties.
Troubleshooting: In Firefox, you can drag table corners within the editor to resize a table. When you use this resizing technique or use HTML attributes to specify table attributes, the table properties may show empty values in the Width and Height fields. This is because table properties actually uses CSS width and height. To resolve this, type the values directly in the table properties. Alternative, in source view, you can edit the HTML values or remove them. Make sure the format is table style="height: 50px; width: 50px;">
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>
Troubleshooting: If you have text, an image, or any other content in the table that was formatted and you are unable to delete a column or row, go to the design view and delete + backspace until the row or column shrinks to one line tall/wide. Then, try again to delete the column or row.