Take the pain out of the Table Align method…

The table align method as described in an earlier blog post is a great way to optimise emails consistently in mobile devices. The huge drawback is that MS Outlook doesn’t really care much for tables floating around side by side. It can cause all kinds of strange things to happen across the full range of MS Outlooks. Here is a solution and some of the hacks you can use to minimise the damage if you prefer using this method:

1. Ghost a column between the blocks

<td>
Table X
<!--[if mso]></td><td><![endif]-->
Table Y
</td>

Using conditional statements, you can say IF Microsoft Outlook rendering THEN add a closing td and start a new one. ELSE is ignored. Turns 2 tables next to each other into one 2 column table. See the codepen here: http://codepen.io/actionrocket/pen/DdhCm/

All the other fixes are essentially halfway houses which try to make it better but never offer pixel perfect solution. For the sake of completion, and because we have all spent long enough doing them already, here they are in brief:

2. Adding MSO specific style to reduce padding

There are a few MSO rules that can reduce the amount of padding added, but doesn’t provide a perfect solution everywhere.

style="border:none;border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;"

This can be expanded upon:

style="border:none;mso-border-right-alt:solid #XXXXXX .5pt;border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;

Whereby we add a .5pt of a solid colour to the right hand side of the block. This is a way of eliminating/lessening a small amount of opaque padding which seems to appear in a text box. Just looking at this old hacky fix is making me feel queasy. I personally have unconditional love for conditional statements.

3. Making sum widths = less than container total

This is a very pure solution, but also messes with the alignment of your desktop email everywhere that isn’t Outlook, unless designed to take up the slack.

What other crazy methods have you used? I have seen percentages used quite effectively to make a more flexible container holding aligned tables.

  • Jaina

    Going to give these a shot, thanks for the heads up on this post, Mike. I’m tempted to try your first option instead of what I currently use. Though, I have to admit, it’s getting easier for me to get my emails “working” in Outlook vs. other devices and email software. I think I’ve gotten “used to” what I have to do for things to work in Outlook.

    I have tried making the sum widths be less than the container, but it never looks quite as pixel perfect as when I design the emails. And, sadly, that just won’t do for me!

    Been trying percentages with some success. Thing is, I’m invariably trying to put images in columns too, and they’re always fixed sizes. At least for desktop version. So that just throws the widths out of whack again! Cue more frustration lol.

  • Mike Ragan

    Haha – yeah right! I couldn’t get percentages to be consistent enough for me. Cool, I actually prefer MS Outlook over Gmail these days (unbelievable as that sounds), it’s full of quirks but at least it opens the door to work arounds and accepts hacks. I find Gmail App point blank refusal to accept media queries umm “frustrating” to say the least!

  • Jaina

    Same! I think at this point, everyone knows how to get past Outlook quirks, but yes, like you say, Gmail just rebuilds your HTML so it’s nigh on impossible to debug at the best of times.

  • Pingback: Microsoft Outlook conditional statements | #ActionRocketLabs

  • http://kevingotbounce.com/ Kevin Mandeville

    This is freaking brilliant. Using method #1 from now on. So simple – wish I had thought of this!

  • Pingback: The Hybrid Coding approach | #ActionRocketLabs

  • Jaina

    Trying Solution #1, where table X and Y are not fixed width, but percentages. Because of this, and the ghost columns, it doesn’t quite work. I’ve tried using conditional CSS to force and fixed width on the tables in Outlook 2007/10/13 (where the issue is arising) but to no avail. Anyone use the ghost columns with percentage width tables?

  • http://jmwhite.co.uk/ James White

    I’ve used this technique in a few campaigns now and it does wonders for not having to reduce widths globally to appease Outlook! One thing I did have to remember to do more recently is add a valign to the ghosted column. It seems Outlook 2007 seemed to push down the table when its adjacent column was much greater in height than the other one, though I didn’t see the behaviour on 2010/2013.

    Either way, great conditional hack!

  • Pingback: HTML Email 1px Border Gap Margin showing - codeengine

  • Bret Kerr

    Thanks! The valign work with every Outlook except 2013 for some reason.

  • Barry Flammia

    I like the ghost column solution but it doesn’t work when reverse stacking as it forces the right aligned table to display on the left. Only solution for me in this instance is to reduce the width of one table by 3px.

  • http://www.squareballoon.co.uk Eoin

    The issue is often caused by how the different email clients choose to round percentages (up or down). As far as I’m aware this won’t work, I always use pixels in the end.