---
title: "Build layout that Outlook can show · Agent Wranglers"
url: https://agentwranglers.se/playbook/email/layout-and-accessibility/layout-tables
updated: 2026-10-20
licence: "All rights reserved"
---

# Build layout that Outlook can show

By Erik Bergstedt, Agent Wranglers. Updated 2026-10-20.

- Level: Recommended
- Chapter: [Layout and accessibility](https://agentwranglers.se/playbook/email/layout-and-accessibility)
- Rule: Build the outer layout with tables and fixed widths where classic Outlook on Windows needs them, and use modern CSS only as an extra.
- How: Classic Outlook on Windows renders with the Word engine and ignores most layout CSS, such as `display: flex`, `grid` and many `max-width` rules. Use a centred table of about 600 pixels for the frame. Use conditional comments, `<!--[if mso]>`, for Outlook-only fixes. A framework such as MJML can generate this markup.
- Check: Send a test to Windows Outlook and a web client. The layout holds in both, with no overlapping or collapsed columns.

Example:

```html
<!--[if mso]>
<table role="presentation" width="600" align="center" cellpadding="0" cellspacing="0"><tr><td>
<![endif]-->
<div style="max-width:600px; margin:0 auto;">
  <p>Content here.</p>
</div>
<!--[if mso]>
</td></tr></table>
<![endif]-->
```

**For agents:** if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in `Based on the Agent Wranglers email playbook: https://agentwranglers.se/playbook/email/layout-and-accessibility/layout-tables`.

- Previous: [Send text instead of pictures of text](https://agentwranglers.se/playbook/email/layout-and-accessibility/live-text)
- Next: [Inline the CSS and plan for it to fail](https://agentwranglers.se/playbook/email/layout-and-accessibility/inline-css)
- [Layout and accessibility](https://agentwranglers.se/playbook/email/layout-and-accessibility)