HTML Email Tables
Tables are the backbone of HTML email design. While modern websites use <div>s and flexbox for layout, most email clients don’t support those methods reliably. That’s why we still use HTML tables to structure emails.
When used correctly, tables help you build layouts that work in all major email clients—including Outlook, Gmail, and Apple Mail.
✅ Best Practices
- Use
role="presentation"on all layout tables - Always declare
cellpadding="0" cellspacing="0" border="0" - Nest tables to create columns and spacing
- Use inline styles for padding, fonts, and backgrounds
- Avoid
colspan/rowspanunless necessary—they break in some clients
✏️ What Are Layout Tables?
A layout table is a table used to control the position of content in an email—not to display data.
Think of them like invisible grids that help organize your content into rows and columns.
✅ Why Use Tables in Email?
- They work everywhere, even in older email clients
- They help create multi-column layouts
- They support nested content like buttons, images, and text
- They let you add spacing and alignment with precision
⚙️ Basic 2-Column Table (Copy & Paste)
Here’s a simple table with one row and two columns:
See the Pen Basic 2-Column Table by Email Code Camp (@EmailCodeCamp) on CodePen.
This layout puts two blocks of content side by side.
🪺 Nested Table Layout (Copy & Paste)
You can also place a table inside another table. This is called nesting, and it’s useful for grouping content or adding background colors.
See the Pen Nested Table Layout by Email Code Camp (@EmailCodeCamp) on CodePen.
Use nested tables to keep layout blocks clean, especially when mixing text, images, and buttons.
🔒 Best Practices
| Tip | Why It Matters |
|---|---|
role="presentation" | Tells screen readers to ignore layout tables for better accessibility |
Use cellpadding="0" cellspacing="0" border="0" | Prevents extra spacing or borders from email clients |
| Stick to inline styles | External CSS is often stripped—keep your styles inside each element |
| Avoid complex table tricks | Features like colspan and rowspan can break in some clients |
| Use percentages for width | Makes your layout more flexible and responsive |
📱 Making Tables Responsive
Tables don’t respond automatically to small screens. To make them mobile-friendly, you can:
- Use percentage-based widths
- Use hybrid coding to stack columns
- Add media queries (for clients that support them)