0Pricing
HTML Academy · Lesson

The Table-Based Layout Approach

Understand why HTML emails use tables instead of divs.

Why Tables for Email?

Email clients — especially Outlook on Windows, which uses Microsoft Word's rendering engine — have no support for flexbox, grid, or even reliable block-level layout. Tables are the only structural primitive that renders consistently across every major mail client.

A Single Outer Table

Every responsive email begins with a 100% width outer <table> that acts as the email body, followed by a fixed-width inner table (commonly 600px) that holds the actual content. This two-level pattern is the foundation of nearly every production template.

<table width="100%" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td align="center">
      <table width="600" cellpadding="0" cellspacing="0" border="0">
        <tr><td>Content goes here</td></tr>
      </table>
    </td>
  </tr>
</table>

All lessons in this course

  1. The Table-Based Layout Approach
  2. Inline Styles for Email
  3. Image Handling in Email Clients
  4. Testing with Litmus and Email on Acid
← Back to HTML Academy