HTML Academy · Lesson

The Table-Based Layout Approach

Understand why HTML emails use tables instead of divs.

The Table-Based Layout Approach is a free HTML Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

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>

Mandatory Table Attributes

Always include cellpadding="0" cellspacing="0" border="0" on every table. Without them, Outlook inserts unexpected gaps. Adding role="presentation" tells screen readers to skip table semantics, which is correct because layout tables are not data tables.

Nested Tables for Columns

To create multiple columns, nest a table with two <td> cells inside the content row. Each cell holds a column. Avoid div+float — Outlook ignores float and stacks the columns vertically anyway, breaking the design.

600px is the Standard Width

The de facto desktop preview pane is around 600px wide. Designing for that width keeps the email comfortably visible without horizontal scroll on Outlook, Gmail desktop, Apple Mail, Yahoo, and Thunderbird simultaneously.

Mobile Stacking with Media Queries

For small screens, target the inner table cells with a media query that sets width to 100% and display to block, causing columns to stack vertically. iOS Mail and Gmail Android honor media queries; Outlook 365 desktop ignores them but keeps the 600px desktop layout.

@media (max-width: 600px) {
  .col {
    display: block !important;
    width: 100% !important;
  }
}

Cell-Level Backgrounds

Background colors and images should be applied to <td> cells, not divs. Outlook supports the bgcolor attribute on td reliably, while CSS background-color on a div may be stripped or ignored entirely depending on the client.

VML for Outlook Backgrounds

Outlook needs Vector Markup Language (VML) for background images. Wrap modern CSS background-image in conditional  comments with an inline v:rect fallback so Outlook renders the image while every other client uses the CSS.

Avoid Modern CSS

Skip flexbox, grid, custom properties (limited support), and most positioning. Stick to display: block/inline, fixed widths via attributes, and inline styles. The output looks dated by web standards but renders identically in every inbox.

Cellpadding for Internal Spacing

Use cellpadding (attribute) and a single padded <td> for internal whitespace. Margins on table cells are unreliable in Outlook; padding on td is universal. Combine bgcolor and padding on the same td for "card" components without divs.

Accessibility

Add role="presentation" to every layout table so screen readers do not announce "row, column 1 of 2". Also include alt text on every image, real text for any content (not images of text), and a clear hierarchical heading order.

Knowledge Check

Why are tables — not divs with CSS flexbox — used to lay out emails?

Summary

HTML email layout uses nested tables with cellpadding/cellspacing/border zero and role="presentation". A 100% outer table centers a 600px inner table; nested td cells form columns that media queries can stack on mobile. Avoid flexbox/grid, use bgcolor on td, and add VML fallbacks for Outlook backgrounds.

Frequently asked questions

Is the “The Table-Based Layout Approach” lesson free?

Yes — the full text of “The Table-Based Layout Approach” is free to read here on the web, and the HTML Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the HTML Academy course, upgrade to CoddyKit PRO.

What will I learn in “The Table-Based Layout Approach”?

Understand why HTML emails use tables instead of divs. You practise HTML Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start HTML Academy?

No prior experience is required. HTML Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “The Table-Based Layout Approach” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this HTML Academy lesson?

Yes. Every HTML Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to HTML Academy