Following on from this article, which gives an overview of coding for HTML emails, this post shows how to build a table with borders which will display in popular email reading programmes.

In this tutorial we will create a containing table, to make the faux vertical borders, insert rows containing a title, an image and a paragraph. We will then apply width and padding values in the correct places in order to produce a consistent layout across email reading programmes. The end result is shown in the image below.

Step 1 – create a containing table

A border created using a border attribute or inline style will not display consistently as, in some programmes, the width of the border will be added to the outside of the tables or table cells, where as in others it will not. To work around this we first need to create a table with thin extra columns from which the false borders will be made:

<table cellspacing="0" cellpadding="0" width="166">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>

The column width, in this case 166 pixels, is applied to the table. The cellspacing and cellpadding values ensure that we are starting with a table free of default styles.
The first and last cells in the row will become the left and right borders, so width and background color are added to these. Alhough it’s not strictly semantically correct, from a display point of view it’s fine to leave the cells themselves empty.

<table cellspacing="0" cellpadding="0" width="166">
<tr>
<td bgcolor="#3399cc" width="1"></td>
<td></td>
<td bgcolor="#3399cc" width="1"></td>
</tr>
</table>

Step 2 – adding the heading

Now the basic strucure is complete we can start adding content. First the heading. Notice here the background colour of the left and right cells changes to match that of the heading. For the benefit of Outlook, when applying padding it must be applied to the parent <td> with the vertical values being matched on all the cells in the row.

Also note the very comprehensive inline style applied to the text. For cross programme consistency the font-family needs to be declared on the nearest parent tag to each piece of text. For the benefit of Hotmail it’s necessary to declare the font weight even when using an <h2>. Also for Hotmail most text elements will require specific margin-top and margin-bottom values to prevent unwanted default values being applied. Simply setting ‘margin: 0;’ won’t work.

<table cellspacing="0" cellpadding="0" width="166">
<tr>
<td bgcolor="#3399cc" width="1" style="padding-top: 8px; padding-bottom: 4px;"></td>
<td style="background-color: #3399cc; padding-top: 8px; padding-right: 8px; padding-bottom: 4px; padding-left: 8px;">
<h2 style="color: #ffffff; font-family: Arial, sans-serif; font-size: 16px; font-weight: bold; line-height: 18px; margin-top: 0;  margin-bottom: 0; padding-top: 8px; padding-right: 8px; padding-bottom: 4px; padding-left: 8px;">

Heading...

</h2>
</td>
<td bgcolor="#3399cc" width="1" style="padding-top: 8px; padding-bottom: 4px;"></td>
</tr>
</table>

Step 3 – adding the image

In order to maintain consistent vertical space between elements in Hotmail and Outlook each row of content needs to be placed in a table row. For clarity just the row containing the image is shown below. Note again that the vertical padding values are applied to the parent <td> of the image, and applied to every <td> in the row. Note also the inline style applied to the image in order to prevent an unwanted space appearing below in Hotmail. As the table borders on each side of the image total 2px wide, the image is 2px narrower than the width of the containing table.

<table cellspacing="0" cellpadding="0" width="166">
<tr>
<td bgcolor="#eeeeee" width="1" style="padding-top: 8px;"></td>
<td style="padding-top: 8px;"><img  style="display: inline; float: right;" src="image.jpg" border="0" height="103" width="164" /></td>
<td bgcolor="#eeeeee" width="1" style="padding-top: 8px;"></td>
</tr>
</table>

Step 4 – wrapping it up

One final row of text completes the table, which is finished with a blue footer made using a border applied to the bottom of the cell. In order to get a consistent layout the border must be applied to the two empty cells which form the left and right borders.

<table cellspacing="0" cellpadding="0" width="166">
<tr>
<td bgcolor="#eeeeee" width="1" style="border-bottom: 3px #3399cc solid; padding-top: 8px; padding-bottom: 8px;"></td>
<td style="border-bottom: 3px #3399cc solid; padding-top: 8px; padding-right: 8px; padding-bottom: 8px; padding-left: 8px;">
<p style="font-family: Arial, sans-serif; font-size: 12px; line-height: 18px; margin-top: 0;  margin-bottom: 0;">

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

</p>
</td>
<td bgcolor="#eeeeee" width="1" style="border-bottom: 3px #3399cc solid; padding-top: 8px; padding-bottom: 8px;"></td>
</tr>
</table>

The complete code

The completed code is below. The process may seem fiddly however, using this process should provide a consistent layout in Outlook, Hotmail, Gmail and Yahoo mail.

<table cellspacing="0" cellpadding="0" width="166">
<tr>
<td bgcolor="#3399cc" width="1" style="padding-top: 8px; padding-bottom: 8px;"></td>
<td style="background-color: #3399cc; padding-top: 8px; padding-right: 8px; padding-bottom: 4px; padding-left: 8px;">
<h2 style="color: #ffffff; font-family: Arial, sans-serif; font-size: 16px; font-weight: bold; line-height: 18px; margin-top: 0;  margin-bottom: 0; padding-top: 8px; padding-right: 8px; padding-bottom: 4px; padding-left: 8px;">

Heading...

</h2>
</td>
<td bgcolor="#3399cc" width="1" style="padding-top: 8px; padding-bottom: 8px;"></td>
</tr>
<tr>
<td bgcolor="#eeeeee" width="1" style="padding-top: 8px;"></td>
<td style="padding-top: 8px;"><img  style="display: inline; float: right;" src="image.jpg" border="0" height="103" width="164" /></td>
<td bgcolor="#eeeeee" width="1" style="padding-top: 8px;"></td>
</tr>
<tr>
<td bgcolor="#eeeeee" width="1" style="border-bottom: 3px #3399cc solid; padding-top: 8px; padding-bottom: 8px;"></td>
<td style="border-bottom: 3px #3399cc solid; padding-top: 8px; padding-right: 8px; padding-bottom: 8px; padding-left: 8px;">
<p style="font-family: Arial, sans-serif; font-size: 12px; line-height: 18px; margin-top: 0;  margin-bottom: 0;">

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

</p>
</td>
<td bgcolor="#eeeeee" width="1" style="border-bottom: 3px #3399cc solid; padding-top: 8px; padding-bottom: 8px;"></td>
</tr>
</table>

Tags:

• Email design
• HTML
• Tutorial