Email Coding 101, Module 3 of 5. The web abandoned table-based layouts in 2005. Email developers never could. Here is why.
In 2007, Microsoft switched the rendering engine in Outlook on Windows from Internet Explorer to Microsoft Word, the same program used to write documents. Word was never designed to render web pages, so it ignores or breaks most modern CSS.
Outlook on Windows still holds a significant share of business email opens, especially in enterprise and B2B. If emails break there, you lose a large part of a professional audience, so email developers build for the lowest common denominator.
Because Word only reliably understands tables, email developers use them as the entire layout system. table is the container, like a grid; tr is a table row; td is a single cell. Every column, row, and section of an email is built with nested tables.
<table width="600" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="300" style="padding: 20px;">Left side content</td>
<td width="300" style="padding: 20px;">Right side content</td>
</tr>
</table>On the web, the same two-column layout takes a simple display: flex or display: grid.
The module compares the same heading, text, and button written both ways. The web version uses a style block and a few clean, semantic elements. The email version wraps everything in a table, row, and cell, with every style repeated inline on each element: verbose, but Outlook-safe.
The gap grows with the email. On the web you define a style once in a class and reuse it, so adding a fourth product card is one new line. In email you copy the same inline styles onto every element, so each extra product card means another full table of repeated styles.
Email coding is not harder because email developers are behind the times. Outlook on Windows forces a 20-year-old approach, and because inline styles cannot be reused, the code bloat compounds with every repeated element.
Next: MSO Conditionals & Outlook Hacks | Back to Email Coding 101