HTML email templates: tables, inline CSS, and client quirks

Main rules

Use a limited set of tags: table, tbody, thead, tr, th, td.
Prefer table layout (block layout is unpredictable in clients).
Nest tables no deeper than three levels.
Keep styles inline.

Restrictions

Do not use:

JavaScript
Flash
Forms

Such emails may never reach the inbox — filters often treat them as dangerous.

Structure

[Preheader]
[Header]
[Content]
[Footer]

Template

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title> - </title>
</head>
<body style="padding:0px;margin:0px;">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr><td align="center" bgcolor="#ffffff">
            <table border="0" cellspacing="0" cellpadding="0" width="600">
                <tr><td>
                <!-- preheader -->
                </td></tr>
                <tr><td align="center">
                <!-- header -->
                </td></tr>
                <tr><td align="center">
                <!-- content -->
                </td></tr>
                <tr><td align="center">
                <!-- footer -->
                </td></tr>
            </table>
        </td></tr>
    </table>
</body>
</html>

Text styling

Always set explicitly:

Color (color)
Line height (line-height)
Font size (font-size) — usually in pixels
Font family (font-family) — use standard system fonts

Safe stacks:

Courier, Courier New, Georgia, Times, Times New Roman
Arial, Verdana, Tahoma, Trebuchet MS

Example:

<div style="line-height:18px;">
    <span style="font-family: Tahoma, Arial, sans-serif; font-size: 16px; color:#b46acc;">
        Sample text
    </span>
</div>

In Outlook Express, line-height on a table cell is ignored — duplicate it on an inner block.

Tips

Hanging prepositions — use a non-breaking space ( ):

Only this&nbsp;year!

Soft hyphen — allow long words to break with :

Nicotinamideadenine&shy;dinucleotidephosphate

Links

Set target="_blank" on links:

<a href="#" target="_blank" style="font-family: Tahoma, Arial, sans-serif; font-size: 16px; color:#b46acc; text-decoration:none;">
    Sample text
</a>

Avoid using a raw URL as the link text when you can use readable label text instead.

Images

<img src="img/img01.jpg" width="300" height="50" alt="Promotion" border="0" style="display: block;" />

Always set:

width
height
alt
style="display:block;"

When image height is under 19px, set line-height on the cell:

<td style="line-height:10px;">
    <img src="img/border_t.png" width="300" height="10" alt="" border="0" style="display: block;" />
</td>

Background images

Outlook 2007, 2010, and 2013 do not support background-image.

Avoid putting a background image on <body> — it raises the spam risk.

Workarounds: open_in_new tools.emailmatrix.ru .

Hidden preheaders

Shown in some webmail clients as preview text:

<!--[if !mso]><!-->
    <div style="display:none !important;font-size:0px;font-color:#ffffff;">
        Four May holiday options from Localway. Staying home over the holidays is a sin.
    </div>
<!--<![endif]-->