How to create a two column email newsletter

html-email, html-table, outlook

Solution

For HTML emails, nested tables are your friend :)

JSFiddle

Note: the border around the table is just to show you where the tables are.

<table border="0" width="600" cellpadding="0" cellspacing="0" align="center">
    <tr>
        <td colspan="2">
            header content here
        </td>
    </tr>
    <tr>
        <td width="300">

            <table border="0" width="300" cellpadding="1" cellspacing="0" align="left">
                <tr>
                    <td>Left Content</td>
                </tr>
            </table>



        </td>
        <td width="300">

            <table border="0" width="300" cellpadding="1" cellspacing="0" align="left">
                <tr>
                    <td>Right content</td>
                </tr>
            </table>

        </td>
    </tr>
</table>

Problem

I am trying to create a two column email flyer but I'm having trouble with the coding as Outlook hates CSS. I'm using tables to keep it as simple as possible but I want two separate tables on the left and the right so I can add data into it as I wish. I tried using `float` left and right on the two tables but Outlook ignores this style. I know the two grey tables at the bottom are each in their own separate "holder" tables but this is so I can duplicate the grey "data" tables for when I add new articles. ``` <table class="all" width="auto" height="auto" border="0" cellspacing="0"><tr><td height="504"> <table width="750" height="140" border="0" cellspacing="0"> <tr> <td width="200" valign="bottom" bgcolor="#E6E6E6"> </td> <td width="345" align="center" valign="bottom" bgcolor="#E6E6E6"> </td> <td width="152" align="center" valign="bottom" bgcolor="#E6E6E6"> </td> <td width="45" align="center" valign="bottom" bgcolor="#E6E6E6"> </td> </tr> <tr> <td width="200" valign="bottom" bgcolor="#E6E6E6"> </td> <td align="center" valign="bottom" bgcolor="#E6E6E6"><font color="#111111" face="Arial Narrow" size="+2">DECEMBER NEWSLETTER</font></td> <td width="152" align="center" valign="bottom" bgcolor="#E6E6E6"><font size="2"><strong>#4 - <span class="orange">04.12.13</span></strong></font></td> <td width="45" align="center" valign="bottom" bgcolor="#E6E6E6"> </td> </tr> </table> <table width="750" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="75" height="50" bgcolor="#E6E6E6" scope="row"> </td> <td width="600" rowspan="2" scope="row"><img src="http://placehold.it/600x200"/></td> <td width="75" bgcolor="#E6E6E6" scope="row"> </td> </tr> <tr> <td width="75" height="81" scope="row"> </td> <td scope="row"> </td> </tr> </table> <table class="holder" width="750" border="0" cellspacing="0" cellpadding="0"> <tr> <td valign="top" scope="row"> <table class="inlinetableleft" width="360"> <tr> <td width="371" align="left">  <table width="360" border="0" cellspacing="0" cellpadding="0"> <tr> <th height="103" colspan="4" align="left" valign="middle" bgcolor="#CCCCCC" scope="row"> </th> </tr> </table>  </td> </tr> </table> <table class="inlinetableright" width="360"> <tr> <td align="left">  <table width="360" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="106" align="left" bgcolor="#CCCCCC" scope="row"> </td> </tr> </table>  </td></tr> </table> </td> </tr> </table> ``` Here is a fiddle of my newsletter so far, it's the bottom two grey tables that I want to be side by side. Fiddle

Original source