JV
1
Why is it still recommended to use tables for email structure?
My colleuge created an email with <div> tag and it works fine in most of the latest Desktop client, Smartphone client and Desktop/Mobile Web browsers. And including Outlook 2011.
Which makes me wonder that why still table is suggested way.
The main reason tables are still used nowadays is to support Outlook 2007/2010/2013. Those versions use Microsoft Word engine to render HTML, and it's quite a mess. It has a limited support for CSS (no
float
orposition
for example), and some CSS properties are only supported on some specific HTML elements. For example,padding
is supported on a<td>
, but not on a<div>
. And even when you could theorically usepadding
on more semantical elements (like<h1>
tags), or usemargin
on<div>
elements instead, Word's rendering engine is still massively bugged and can have unpredictable behavior with such HTML and CSS code. Thus, developers find it easier to just use<table>
instead. You can read more about Outlook HTML and CSS support here.But here's the thing : if you don't feel like you need to support Outlook 2007/2010/2013, then you can absolutely ditch tables and use better code instead. And even if you need to support it, simple one-column layouts can be done without tables. The reason your template works in Outlook 2011 is that this version (for Mac only) uses WebKit rendering engine (just like in Safari or Apple Mail).
So a simple single column layout doesn't need table and can work in Outlook 2007/2010/2013 too?
I've been doing some work recently to see how email can be built in a less table-heavy way, and weirdly I started to see some odd things happen in some of the "good" email clients when you send an email built in divs. Long and short of it is, as cumbersome as they are, tables are still the safest way to maintain a consistent control over layout.
Can you share with us, what problems did you face and with which email clients?
I have only found <div>'s useful in maintaining order with responsive design and the display work around with Gmail...