HTML

If there’s only one thing you to know about coding email, it’s that tables rule the day. Forget that old “separation of structure, presentation, and behavior” nonsense you learned in standards-based web design. Unlike modern web design the <table> element isn’t used just for tabular data, it’s all there is for consistent structure. External CSS doesn’t drive the styling, either; emails depend on inlined CSS.

Tables Within Tables

For finer control of your HTML, try nesting <table> elements when building emails. At its simplest, an email should be at least two tables deep:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title></title>
        <style></style>
    </head>
    <body>
        <table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable">
            <tr>
                <td align="center" valign="top">
                    <table border="0" cellpadding="20" cellspacing="0" width="600" id="emailContainer">
                        <tr>
                            <td align="center" valign="top">
                                This is where my content goes.
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </body>
</html>

There’s a good reason; you must provide a table to serve as a redundant <body> element, as some email clients strip out the element when they render the email.

Not Too Wide

Current best practices dictate that emails should be around 600px in width, and we’ve found that 800px is a workable upper limit. The second table - emailContainer, in this case - is where you can set that width:

<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable">
    <tr>
        <td align="center" valign="top">
            <table border="0" cellpadding="20" cellspacing="0" width="600" id="emailContainer">
                <tr>
                    <td align="center" valign="top">
                        This is where my content goes.
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

Many email clients now feature ‘preview’ windows where the email is rendered without the need for the user to truly ‘open’ it. Unfortunately, those preview windows tend to be quite small. This 600 - 800 pixel range is one that tends to fit nicely within these tiny windows.

HTML Attributes

While much of the styling in standards-based HTML is done via CSS, there are times where styling via HTML attributes works better for email. Because some major email clients are running on antiquated rendering engines, they tend to better understand attributes:

<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable">
    <tr>
        <td align="center" valign="top">

The attributes above, border, cellpadding, cellspacing, width, align, and valign are supported in all email clients, making them ideal for setting up some baseline styling before you get into CSS.

Code Responsively

Just because you’re forced to write code better suited for the web of 1998 doesn’t mean it’s all bad. As archaic as using tables to build an email may be, new techniques like responsive web design are finding their way into HTML email. As you code, strive to make every email responsive; you can do this by setting only one fixed width in the email:

<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable">
    <tr>
        <td align="center" valign="top">
            <table border="0" cellpadding="20" cellspacing="0" width="600" id="emailContainer">
                <tr>
                    <td align="center" valign="top">
                        <table border="0" cellpadding="20" cellspacing="0" width="100%" id="emailHeader">
                            <tr>
                                <td align="center" valign="top">
                                    This is where my header content goes.
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td align="center" valign="top">
                        <table border="0" cellpadding="20" cellspacing="0" width="100%" id="emailBody">
                            <tr>
                                <td align="center" valign="top">
                                    This is where my body content goes.
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td align="center" valign="top">
                        <table border="0" cellpadding="20" cellspacing="0" width="100%" id="emailFooter">
                            <tr>
                                <td align="center" valign="top">
                                    This is where my footer content goes.
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

By adding other tables, emailHeader, emailBody, and emailFooter and setting their widths to 100%, you only need to manipulate the emailContainer table. These independent tables make it simpler to create an email that works well on small displays.

Back to top