Multi-Column Layout

What is it?

We touched upon columns in the Section Blocks section of the core tutorial. In this tutorial we'll look into email columns in detail with some examples. Notice the class of each new column changes, ready for you to add to and edit in css.

Two Columns


<!-- // SECTION BLOCK // -->

<tr>
    <td align="center" valign="top" class="Section">

        <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="600" class="SectionBlock" bgcolor="#ffffff" style="width: 600px;" align="center">
            <tr>
                <!-- // CONTENT CONTAINER // -->

                <td class="Section1padding" align="center">
                    <table border="0" cellpadding="0" cellspacing="0" width="100%">
                        <tr>
                            <!-- // Column 1 // -->
                            <td align="left" valign="top" class="Section1Content">
                                Column 1 content
                            </td>
                            <!-- // Column 2 // -->
                            <td align="left" valign="top" class="Section1Content2">
                                Column 2 content
                            </td>
                        </tr>
                    </table>
                </td>
                <!-- // CONTENT CONTAINER // -->
            </tr>
        </table>
        
    </td>
</tr>
<!-- // SECTION BLOCK END // -->

Three Columns


<!-- // SECTION BLOCK // -->

<tr>
    <td align="center" valign="top" class="Section">

        <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="600" class="SectionBlock" bgcolor="#ffffff" style="width: 600px;" align="center">
            <tr>
                <!-- // CONTENT CONTAINER // -->

                <td class="Section1padding" align="center">
                    <table border="0" cellpadding="0" cellspacing="0" width="100%">
                        <tr>
                            <!-- // Column 1 // -->
                            <td align="left" valign="top" class="Section1Content">
                                Column 1 content
                            </td>
                            <!-- // Column 2 // -->
                            <td align="left" valign="top" class="Section1Content2">
                                Column 2 content
                            </td>
                            <!-- // Column 3 // -->
                            <td align="left" valign="top" class="Section1Content3">
                                Column 3 content
                            </td>
                        </tr>
                    </table>
                </td>
                <!-- // CONTENT CONTAINER // -->
            </tr>
        </table>
        
    </td>
</tr>
<!-- // SECTION BLOCK END // -->

Four Columns


<!-- // SECTION BLOCK // -->

<tr>
    <td align="center" valign="top" class="Section">

        <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="600" class="SectionBlock" bgcolor="#ffffff" style="width: 600px;" align="center">
            <tr>
                <!-- // CONTENT CONTAINER // -->

                <td class="Section1padding" align="center">
                    <table border="0" cellpadding="0" cellspacing="0" width="100%">
                        <tr>
                            <!-- // Column 1 // -->
                            <td align="left" valign="top" class="Section1Content">
                                Column 1 content
                            </td>
                            <!-- // Column 2 // -->
                            <td align="left" valign="top" class="Section1Content2">
                                Column 2 content
                            </td>
                            <!-- // Column 3 // -->
                            <td align="left" valign="top" class="Section1Content3">
                                Column 3 content
                            </td>
                            <!-- // Column 4 // -->
                            <td align="left" valign="top" class="Section1Content4">
                                Column 4 content
                            </td>
                        </tr>
                    </table>
                </td>
                <!-- // CONTENT CONTAINER // -->
            </tr>
        </table>
        
    </td>
</tr>
<!-- // SECTION BLOCK END // -->

Two Columns - exact width


<!-- // SECTION BLOCK // -->

<tr>
    <td align="center" valign="top" class="Section">

        <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="600" class="SectionBlock" bgcolor="#ffffff" style="width: 600px;" align="center">
            <tr>
                <!-- // CONTENT CONTAINER // -->

                <td class="Section1padding" align="center">
                    <table border="0" cellpadding="0" cellspacing="0" width="100%">
                        <tr>
                            <!-- // Column 1 // -->
                            <td align="left" valign="top" class="Section1Content" width="300" style="width: 300px;">
                                Column 1 content
                            </td>
                            <!-- // Column 2 // -->
                            <td align="left" valign="top" class="Section1Content2" width="300" style="width: 300px;">
                                Column 2 content
                            </td>
                        </tr>
                    </table>
                </td>
                <!-- // CONTENT CONTAINER // -->
            </tr>
        </table>
        
    </td>
</tr>
<!-- // SECTION BLOCK END // -->