HTML Email Structure: The Definitive Best Practices

The Reality of Email HTML

Email clients strip, modify, and ignore CSS in ways that would make any web developer weep. Outlook uses Word's rendering engine. Gmail strips <style> tags in certain contexts. Yahoo Mail has its own set of quirks.

The Table-Based Foundation

Yes, tables are still the backbone of reliable email layout. The key is using a nested table structure: an outer wrapper for centering, a container table for max-width, and inner tables for content rows.

The Wrapper Pattern

Start every email with a full-width wrapper table that handles background color and centering. Inside that, a fixed-width container holds your actual content.

Responsive Design Without Media Queries

Many email clients don't support media queries. The "fluid hybrid" method uses a combination of max-width, min-width, and ghost tables (wrapped in MSO conditional comments) to create responsive layouts without relying on @media.

The Ghost Table Technique

Ghost tables use Outlook conditional comments to provide table-based layout for Outlook while letting other clients use the more flexible div-based approach.

Typography in Email

Always specify font stacks inline. Web fonts work in some clients (Apple Mail, iOS Mail, Thunderbird) but not in Gmail, Outlook, or Yahoo. Design your emails to look good with system fonts first.

Key Takeaways

Build on tables, enhance with CSS, test in real clients. The goal isn't pixel-perfect rendering — it's acceptable rendering everywhere and great rendering where the client supports it.