Table layouts in email lead to a number of rendering and accessibility issues, so the less we use them the better. Outlook for Windows is the only reason we even need to use tables anymore and it's now at just around five percent of email clients used.

So here’s an approach to not having to use tables for structure that's worth considering. This idea came from Mark Robbins’s Get Off The Table concept where he uses mso tags to attempt to make Outlook treat divs as tables.

The single-column approach

Here's what you do: use divs for structure only, and don’t do anything for Outlook, letting multi-column div layouts turn into single-column layouts in Outlook. Essentially making the Outlook version look similar to what you might do for a mobile version of a design.

Here’s what do for the outside container to center your content:

<div style="max-width: 600px; margin: 0 auto; mso-element-frame-width: 600px; mso-element: para-border-div; mso-element-left: center; mso-element-wrap: no-wrap-beside;"></div>

You could even set mso-element-frame-width to a narrower width that works for Outlook only to account for the single-column layout design.

You could still use ghost tables where you feel you absolutely need to have columns, just as you would make that consideration for mobile. I tried removing ghost tables from the Starter template layouts, keeping them in just a couple of areas, and it reduced the overall code by nearly half!

A couple of side effects

There are two issues worth noting that come with using divs in Outlook:

1. Any padding added to a div is ignored in Outlook.
2. And, background colors don’t show up right. The div background color gets applied to each text line and has gaps in-between lines. You can remove the background color altogether by using background-color: transparent on the text itself. For images, the background color gets applied to the left and right of them which you can avoid by scaling your images to fit the space.

Don't be afraid to allow for Outlook to look bad in some areas if the content is at least readable! We only really need to include tables for Outlook when we want to set a width on a container, change the background, or add columns.

Is this approach worth doing? That’s up to how you feel it may work with your design, and the level of compatibility you feel you need for Outlook. But keep in mind your use of tables. The amount of time you spend having to work around them. Added code bloat. How you're only doing it for one email client that's being used less and less. Even if we don't completely stop using them, we should definitely reduce our overuse of them!

Blocks Edit allows you to use tables as you see fit for your design, not forcing you to use them as the standard that most visual email editors default to.