Tables in emails are one of the most useful formats for certain tasks. Pricing comparisons, price lists, product specs, schedules — all of these are clearer in a table than in plain text. But coding tables for email is harder than for the browser: email clients support CSS inconsistently, and on mobile a wide table simply runs off the screen.
When a table makes sense
A table in an email is justified when you need to compare data across several parameters at once. Three pricing plans with different features — that’s a table. One plan with a description — that’s a list.
When a table helps: comparing plans or products, a price list with multiple parameters, an event schedule, technical specifications.
When a table is unnecessary: a plain list with no comparison, single-parameter data, content that reads better as plain text.
The specifics of coding tables for email
Email markup is built on HTML tables — that’s the standard supported by every email client. But tables used for data (not for the email’s structural layout) require a separate approach.
Fixed width. An email is 600 pixels wide. A data table needs to fit within that width. If there are too many columns, the table will overflow the screen — especially on mobile.
Inline styles. Many email clients ignore external CSS files and block-level styles. All table styling needs to be written inline — directly in the tag attributes.
Cellpadding and cellspacing. These attributes are set directly on the <table> tag, not via CSS — for Outlook compatibility.
Basic table structure for an email:
html
<table width=»100%» cellpadding=»12″ cellspacing=»0″ border=»0″
style=»border-collapse: collapse;»>
<tr>
<th style=»background-color: #f4f4f4; text-align: left;
font-size: 14px; padding: 12px;»>Parameter</th>
<th style=»background-color: #f4f4f4; text-align: left;
font-size: 14px; padding: 12px;»>Basic</th>
<th style=»background-color: #f4f4f4; text-align: left;
font-size: 14px; padding: 12px;»>Pro</th>
</tr>
<tr>
<td style=»border-bottom: 1px solid #eeeeee;
padding: 12px; font-size: 14px;»>Storage</td>
<td style=»border-bottom: 1px solid #eeeeee;
padding: 12px; font-size: 14px;»>5 GB</td>
<td style=»border-bottom: 1px solid #eeeeee;
padding: 12px; font-size: 14px;»>50 GB</td>
</tr>
</table>
Pricing comparison table
A pricing table is the most popular format in B2B and SaaS emails. A few recommendations.
Highlight the recommended option. One plan should stand out visually — a different header background color, a border, a “Popular” label. This guides the reader’s choice.
No more than three or four columns. Any more and the table becomes unreadable on mobile. If you have more plans, it’s better to link to a comparison page on the website.
Use icons instead of text wherever possible. A checkmark for “included” and an X for “not included” read faster than “yes” and “no.”
A button under each plan. The reader should land directly on the right plan, not on a general page.
Democo’s email compares two plans using cards instead of a table. Each card is a separate block with a price, a list of features, and a button. On mobile, this format adapts better than a multi-column table.
Adapting a table for mobile
A table with three or four columns doesn’t fit on a phone screen. There are a few strategies.
Horizontal scroll. The table keeps its structure, and the reader scrolls right. It works, but it’s inconvenient. Suitable only for simple tables with a small amount of data.
Vertical rearrangement via CSS. Using media queries, rows and columns rearrange into a vertical list. Each row becomes a separate block. This requires media query support — Gmail on Android and Apple Mail support it, Outlook doesn’t.
A simplified mobile version. Two columns instead of four — keep only the most important parameters. Put the rest behind a “Full comparison on the site” link.
Cards instead of a table. Each plan is a separate card block, which stacks into a single column on mobile. This is the most reliable approach — it doesn’t require complex CSS and works everywhere.
Price lists in emails
A price list is different from a comparison table: instead of comparing options, it lists products or services with their prices.
A few formats.
A table with prices. Name, short description, price. A simple structure that works for services and non-physical products.
Product cards. Image, name, price, button. The standard for online stores. Easier to adapt for mobile than a table.
A price list. If there are many items and images aren’t needed, a simple list with prices works better than an overloaded table.
Prices in an email should be accurate as of the send date. If a price changes after sending, add a note on the landing page that the price in the email may be outdated.
Bottom line
A table works in an email when there’s a lot of data that needs to be compared. Code it with inline styles, limit the number of columns, and always test on mobile. If a table doesn’t fit on a narrow screen, cards are the more reliable choice.
Also read: