Turning floated tables into columns in Outlook

One of the many layout techniques for email is floating tables. This technique basically provides similar behaviour to the float CSS property but is supported pretty much everywhere. Problem is that pesky email client Outlook will attempt to ruin your party with its poor CSS box model. Sadly Outlook and table widths just don’t add up, which introduces problems like content appearing below its designed place as well alignment issues. Thankfully however, thanks to Mike Ragan from Action Rocket, there’s a cool new way to workaround this issue.

Outlook and its box model, it doesn’t add up

Basically 2 + 2 = 5 in Outlook terms. It really doesn’t care for pixel perfect designs, despite careful width calculation Outlook will break floated table layouts. FACT.

Outlook generally renders tables with more spacing initially than you’d perhaps know is there. In order to fix this, specific boilerplate related code was developed a while ago:

table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
table td { border-collapse:collapse; }

This will help in removing the additional spacing that tables have in Outlook, which potentially may or may not solve your issue.

Another workaround could be to drop the widths of your floated tables slightly to essentially create a safe zone to work with Outlook, but this will obviously affect the overall layout and likely mess up alignment and any “symmetrical” appearance you might crave. When you need everything to be absolutely on boundaries and perfect, the method below if definitely for you.

Can’t get floated tables to work? Cheat!

So if you haven’t already rage quit from seeing your floated tables be anything but that in Outlook, time to break out a rather clever conditional hack. One thing that Outlook will do better is display two cells side by side when using <td>, that is after all the intended purpose of the HTML tag, however you won’t necessarily want to actually use this layout method across all clients for several reasons:

1. Your using a fluid approach for mobile clients
2. You want to support Android 4.4 (No display:block support on <td>, meaning no table cell stacking
3. Better control over table stacking ordering

Ghost a column, win the game

The solution is quite simple in terms of implementation, but the results provide a very clever and creative hack. Adding this between your floated tables will create a ghost column:

<!--[if mso]></td><td><![endif]-->

Here is an example of this might look in a template.

<table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
        <!-- Wrapping cell for the floated tables -->
        <td>
            <table border="0" cellpadding="0" cellspacing="0" align="left" width="50%">
                <tr>
                    <td><!-- Floated Table Left --></td>
                </tr>
            </table>
         <!--[if mso]></td><td><![endif]-->
            <table border="0" cellpadding="0" cellspacing="0" align="right" width="50%">
                <tr>
                    <td><!-- Floated Table Right --></td>
                </tr>
            </table>
        </td> 
       <!-- Closing tag for wrapping cell -->
    </tr>
</table>

The conditional code here adds a closing table cell tag followed by an opened table cell between the two floated tables. The closing tag basically turns the wrapping cell containing the two floated tables as the start of column one, the opened table cell proceeding it now creates the start of the second column. The original closing tag for the wrapping cell in the previous example is now the closing tag for column two.

How Outlook will see the code above is like this:

<table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
        <!-- Wrapper table cell now becomes the start of first column -->
        <td>
            <table border="0" cellpadding="0" cellspacing="0" align="left" width="50%">
                <tr>
                    <td><!-- Floated Table Left within a table cell --></td>
                </tr>
            </table>
        </td> 
        <!-- Conditional closing tag, that ends the first column -->
        <!-- Opening a new table cell, I'm the start of the second column -->
        <td>
            <table border="0" cellpadding="0" cellspacing="0" align="right" width="50%">
                <tr>
                    <td><!-- Floated Table Right within a table cell --></td>
                </tr>
            </table>
        </td> 
        <!-- Wrapping cell now acting as the closing tag for the second column -->
    </tr>
</table>

While Outlook sees two columns, all other clients will see floated tables, meaning you haven’t sacrificed your overall layout at the expense of Outlook. You have simply made Outlook parse the floated tables as columns instead.

Try it for yourself

There you have it, you’ve ghosted a column layout for Outlook. This method makes floating tables a lot easier to work with, because you don’t have to worry about Outlook choking on your table widths as much. Its important to calculate accurate widths when using floated tables, but this hack definitely makes Outlook more easier to work with. Try it, you’ll love it.

You can also use this method when there are more than two floated tables, simply add the conditional closing and opening table cell tags after the closing table tag of a floated table but before the start of the next floated table. Just make sure you don’t add any rogue table cell tags in the wrong place, otherwise your layout will be broke!

As I mentioned in the beginning, I’m not the original author of this hack, all credit goes to Mike Ragan from Action Rocket. I just felt compelled to share it, and also expand further on what it truly does for Outlook. Have fun!