Email Layout: 7 Common Patterns, When to Use Each, and the HTML Behind Them

An email layout is the arrangement of header, content blocks, and footer inside a container, usually about 600px wide. Seven patterns cover most emails: single-column (receipts, resets, most lifecycle mail), inverted pyramid (announcements), Z-pattern (promos with one CTA), zig-zag (feature tours), multi-column grid (products), hero plus modules (newsletters), and letter-style (personal, text-first). Pick the pattern by email type, then build it on nested tables, because desktop Outlook renders HTML with Microsoft Word’s engine, which Litmus documents this way: “Outlook will ignore most styles that you apply to your <div> tags including widths and paddings, so it’s important that you use <table> tags for your content instead”.

The first half of this post is about choosing a layout. The second half is the HTML that makes it render everywhere, including a copy-paste two-column email template. For responsive techniques in depth, see How to Build a Responsive HTML Email Template. For typography and color, see Email Design Best Practices for Developers and Marketers.

---

Common Email Layout Patterns (and When to Use Each)

Pattern	Best for	Mobile behavior
Single column	Transactional mail, password resets, onboarding steps	Already mobile-ready; no stacking
Inverted pyramid	Product announcements, changelogs	Single column; key message stays above the fold
Z-pattern	Promotions with one primary CTA	Collapses to a top-to-bottom read
Zig-zag	Feature tours, case studies	Image/text rows stack; keep the image first
Multi-column grid	Product or feature grids	Columns stack; 3+ columns stack poorly
Hero plus modules	Newsletters, digests	Hero scales down; modules stack in order
Letter-style	Founder notes, win-backs, outbound	Plain text; nothing to break

Single column. One stack of blocks at 600px. It suits receipts, password resets, and onboarding, where the reader needs one thing. Campaign Monitor notes that multi-column designs adapt well when built responsively, but single-column is the simpler and more reliable path on mobile. When unsure, start here.

Inverted pyramid. The main message and CTA come first, supporting detail below, fine print last. Use it for product announcements, where most readers stop after two screens.

Z-pattern. Logo top left, a link or nav top right, a diagonal through the hero, then the CTA bottom right. It fits promotions with a single offer. On mobile it becomes a plain vertical read, so the CTA must also work as the last thing in the stack.

Zig-zag. Image left and text right, then the reverse on the next row. Good for feature tours. Stack each row with the image first so the alternation does not make the mobile order jump around.

Multi-column grid. Two columns for products or features, occasionally three for icon rows. Below about 480px, columns should stack full width (template below). Avoid three columns for text-heavy content.

Hero plus modules. A large hero for the lead story, then self-contained modules (article, product, event) that you can reorder or drop. This is the newsletter workhorse and maps directly to the section blocks below.

Letter-style. Minimal styling, left-aligned text, one link, no banner. It reads as a personal message, which makes it a strong fit for outbound and win-back mail, and it is the safest layout for deliverability testing.

---

The Anatomy of an Email Layout

Every pattern above is built from the same vertical stack of sections:

Section	Purpose	Notes
Preheader	Preview text in the inbox pane	Hidden visually; 40-130 characters (Email on Acid)
Header / Logo	Brand identity	Centered table cell; keep height under 100px
Hero	Primary image or headline	Full-width image inside a table cell
Body content	Text, product blocks, feature rows	One or more section tables, stacked
CTA	Primary call-to-action	Table-based bulletproof button
Footer	Unsubscribe link, legal, social icons	Required by CAN-SPAM / GDPR

The preheader is easy to forget, yet it is the first line of copy a recipient reads. See email preheader text for limits and per-client behaviour. Code it as a visually hidden <span> at the top of the <body>:

<span style="display:none !important; visibility:hidden; mso-hide:all;
  font-size:1px; line-height:1px; max-height:0; max-width:0;
  opacity:0; overflow:hidden;">
  Your 40-130 char preview text goes here.
</span>

mso-hide:all hides it in Outlook; the rest handle other clients.

---

Why Tables, Not Divs

Desktop Outlook (2007 through 2021) uses Word’s engine, which ignores CSS widths and paddings on <div> tags but honors table cell sizing (Email on Acid). CSS grid support is also partial: caniemail.com puts display:grid at roughly 82%, so about one in five clients may not render a grid as intended. The Campaign Monitor CSS Support Guide tracks the rest.

The new Outlook for Windows replaces Word with a web-based engine (Email on Acid), but Office 2021, the last Word-engine version, reaches end-of-support on October 13, 2026 (Microsoft Lifecycle). Litmus (May 2026) puts Outlook at 6.49% of opens: small, but real in B2B. Tables stay until the installed base clears.

---

The Standard Layout Skeleton

A copy-pasteable outer wrapper. Everything else nests inside it:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
</head>
<body style="margin:0; padding:0; background-color:#f4f4f4;">

  <!-- Preheader -->
  <span style="display:none !important; visibility:hidden; mso-hide:all;
    font-size:1px; line-height:1px; max-height:0; max-width:0;
    opacity:0; overflow:hidden;">Preview text here.</span>

  <!-- Outer wrapper table -->
  <table role="presentation" width="100%" cellspacing="0" cellpadding="0"
         border="0" style="background-color:#f4f4f4;">
    <tr>
      <td align="center">

        <!-- Content wrapper: 600px max -->
        <table role="presentation" width="600" cellspacing="0" cellpadding="0"
               border="0" style="max-width:600px; width:100%;
               background-color:#ffffff;">
          <tr>
            <td style="padding:24px;">
              <!-- Section content goes here -->
            </td>
          </tr>
        </table>

      </td>
    </tr>
  </table>

</body>
</html>

role="presentation" tells screen readers the table is layout, not data. width="600" is the HTML attribute Outlook honors; max-width:600px handles modern clients.

---

A Two-Column Email Template That Stacks on Mobile

Here is a copy-paste responsive two column email template. It uses the fluid hybrid technique: each column is an inline-block <div> capped at 300px, so the pair sits side by side inside a 600px wrapper and wraps to full width when the screen is narrower. The mso conditional comments give Outlook a real two-cell table, since Word ignores inline-block. Paste it where the skeleton says “Section content goes here”:

<!-- Two-column section -->
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0">
  <tr>
    <td align="center" style="font-size:0;">
      <!--[if mso]>
      <table role="presentation" width="552" cellspacing="0" cellpadding="0" border="0">
      <tr><td width="276" valign="top">
      <![endif]-->
      <div class="col" style="display:inline-block; width:100%; max-width:276px; vertical-align:top;">
        <table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0">
          <tr>
            <td style="padding:12px; font-family:sans-serif; font-size:16px; line-height:24px;">
              Left column content.
            </td>
          </tr>
        </table>
      </div>
      <!--[if mso]>
      </td><td width="276" valign="top">
      <![endif]-->
      <div class="col" style="display:inline-block; width:100%; max-width:276px; vertical-align:top;">
        <table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0">
          <tr>
            <td style="padding:12px; font-family:sans-serif; font-size:16px; line-height:24px;">
              Right column content.
            </td>
          </tr>
        </table>
      </div>
      <!--[if mso]>
      </td></tr></table>
      <![endif]-->
    </td>
  </tr>
</table>

The two 276px columns fit inside the skeleton’s 552px content area (600px minus 24px padding each side). font-size:0 on the parent removes the whitespace gap between inline-blocks; each cell restores its own font size. For clients that support <head> styles, this optional block makes the stack explicit on small screens:

<style>
  @media only screen and (max-width: 480px) {
    .col { max-width: 100% !important; }
  }
</style>

For stacking variants (media-query-only, Outlook-specific ghost tables), see the responsive email template guide.

---

Bulletproof Buttons and Spacing

Outlook’s Word engine ignores padding on inline elements, so put the background on a table cell and the padding on the link:

<!-- Bulletproof CTA button -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0">
  <tr>
    <td style="border-radius:4px; background-color:#4F46E5;">
      <a href="https://example.com"
         style="display:inline-block; padding:14px 28px;
                font-family:sans-serif; font-size:16px;
                color:#ffffff; text-decoration:none;
                font-weight:600;">
        Get Started
      </a>
    </td>
  </tr>
</table>

For vertical spacing, use cell padding or empty rows with explicit heights, not margin on block elements, which Outlook handles inconsistently.

---

Dark Mode Considerations for Layout

Clients may override the background colors you set on <body> and the outer table. Set explicit backgrounds on every section cell, so inner sections do not stay transparent over an inverted body, and add overrides with class names, since inline styles win unless the <head> rule uses !important:

@media (prefers-color-scheme: dark) {
  .email-body { background-color: #1a1a1a !important; }
  .content-cell { background-color: #2d2d2d !important; color: #e8e8e8 !important; }
}

The full picture, including per-client behaviour and image handling, is in Email Dark Mode.

---

Building with Components Instead of Hand-Coding

React Email provides layout primitives (<Html>, <Body>, <Container>, <Row>, <Column>) that compile to the same table-based HTML, written in JSX. When the email is finished, How to Send HTML Email (the Right Way) covers MIME structure, inline CSS tooling, and API delivery. Coldletter’s template editor also builds table-based layouts visually while keeping the HTML standards-compliant.

---

Frequently Asked Questions