Column Layouts

Knowing how to build rock-solid multi-column layouts is pretty important; most emails floating around out there aren’t single-column affairs. Multi-column layouts are good at holding lots of information, and the principles behind building them can be applied to lots of other coding scenarios. Here’s some pretty-standard code, for a two-column layout:

<table border="0" cellpadding="0" cellspacing="0" width="600" id="templateColumns">
    <tr>
        <td align="center" valign="top" width="50%" class="templateColumnContainer">
            <table border="0" cellpadding="10" cellspacing="0" width="100%">
                <tr>
                    <td class="leftColumnContent">
                        <img src="http://placekitten.com/g/280/300" class="columnImage" />
                    </td>
                </tr>
                <tr>
                    <td valign="top" class="leftColumnContent">
                        <h1>Left Column</h1>
                        Lorem ipsum dolor sit amet.
                    </td>
                </tr>
            </table>
        </td>
        <td align="center" valign="top" width="50%" class="templateColumnContainer">
            <table border="0" cellpadding="10" cellspacing="0" width="100%">
                <tr>
                    <td class="rightColumnContent">
                        <img src="http://placekitten.com/g/280/300" class="columnImage" />
                    </td>
                </tr>
                <tr>
                    <td valign="top" class="rightColumnContent">
                        <h1>Right Column</h1>
                        Lorem ipsum dolor sit amet.
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

You’ll notice that the columns themselves are individual tables nested within a larger container <table>; we’ve found that this nesting method tends to give more control over the design and structure of a multi-column email. A three-column layout is a simple variation of this code:

<table border="0" cellpadding="0" cellspacing="0" width="600" id="templateColumns">
    <tr>
        <td align="center" valign="top" width="33%" class="templateColumnContainer">
            <table border="0" cellpadding="10" cellspacing="0" width="100%">
                <tr>
                    <td class="leftColumnContent">
                        <img src="http://placekitten.com/g/180/200" class="columnImage" />
                    </td>
                </tr>
                <tr>
                    <td valign="top" class="leftColumnContent">
                        <h1>Left Column</h1>
                        Lorem ipsum dolor sit amet.
                    </td>
                </tr>
            </table>
        </td>
        <td align="center" valign="top" width="33%" class="templateColumnContainer">
            <table border="0" cellpadding="10" cellspacing="0" width="100%">
                <tr>
                    <td class="centerColumnContent">
                        <img src="http://placekitten.com/g/180/200" class="columnImage" />
                    </td>
                </tr>
                <tr>
                    <td valign="top" class="centerColumnContent">
                        <h1>Right Column</h1>
                        Lorem ipsum dolor sit amet.
                    </td>
                </tr>
            </table>
        </td>
        <td align="center" valign="top" width="33%" class="templateColumnContainer">
            <table border="0" cellpadding="10" cellspacing="0" width="100%">
                <tr>
                    <td class="rightColumnContent">
                        <img src="http://placekitten.com/g/180/200" class="columnImage" />
                    </td>
                </tr>
                <tr>
                    <td valign="top" class="rightColumnContent">
                        <h1>Right Column</h1>
                        Lorem ipsum dolor sit amet.
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

You can also see that the column widths aren’t based on pixel widths; they’re percentage-based. The <table> that contains the columns does get a defined pixel width. How you set table dimensions, whether in percentages or pixels, is really up to you; we’ve found that the method shown above gives us a nice amount of control, while keeping the tables ‘squishy’ enough that small-pixel variations don’t disturb things too badly.

Optimal Control

So we nest tables and use percentages on content-containing tables, all in the name of control. There’s one more bit to take note of: the use of the cellpadding attribute. Some email clients don’t support CSS margins, but all of them support padding, whether its CSS- or attribute-based. Using the cellpadding attribute is great in cases where you need a standard padding amount on your <td> elements.

Because cellpadding is an HTML attribute, you can be pretty certain that padding set with it will render consistently across email clients. In cases where you need spacing of varying sizes, it’s best to use CSS padding - just make sure it’s done on <td> elements - this is where padding works most consistently.