Why invoice emails are still built with tables
Email clients are not browsers. Three facts explain almost every layout bug you will ever see in an email:
- Outlook for Windows renders HTML with Microsoft Word. Every desktop version since 2007, including the current Microsoft 365 build, uses Word's engine. It has no support for flexbox, CSS grid,
max-widthon block elements, background images on most elements, ormarginon many. It does understand tables, because Word understands tables. - Gmail strips or ignores parts of your CSS. The Gmail web client supports a
<style>block with some limits, but the Gmail mobile app displaying a non-Gmail account (an Outlook.com or company mailbox, say) removes<style>entirely and keeps only inline styles. If a rule matters, it has to be inline. - Some clients block images by default. Outlook does, and many corporate mail systems do. Anything that only exists as an image, including the amount due, may not be seen.
Nested tables with inline CSS are the lowest common denominator that every client renders the same way. Modern CSS still has a place: put it in a <style> block as a progressive enhancement, so that clients which support it get a nicer result and clients which do not still get a correct one.
What an invoice email must contain
Before layout, get the content right. The customer should be able to answer four questions without scrolling: who is this from, how much, by when, and how do I pay.
| Element | Guidance |
|---|---|
| Subject line | Specific and boring: Invoice #1042 from Northwind Plumbing: $1,240.00 due Mar 14. Invoice number first so replies and searches find it; amount and due date so it can be triaged from the inbox list. |
| Preheader | The hidden line of text that inbox lists show after the subject. Use it for the call to action, not a repeat of the subject. |
| Sender | A person or the business name, from your own domain. Not a payment platform's name, and not a no-reply address; customers reply to invoices with questions, and you want those. |
| Amount due and due date | The largest text on the page, as live text, never an image. |
| Pay button | Above the line items, not below them. One button, one action, linking to a hosted payment page for this invoice. |
| Line items and total | Enough detail to recognize the work. Long invoices can summarize here and link to the full document. |
| Invoice number, date, terms, reference | Job number, PO number or account number if the customer's bookkeeper will need it. |
| Other ways to pay and how to ask a question | A phone number and a reply address. Some customers will always pay by check; make it easy for the rest. |
| Business identity | Legal name and physical address in the footer. Transactional email is exempt from most of CAN-SPAM's opt-out rules, but identification still matters and it helps deliverability. |
| Plain-text version | Sent as the alternative part of the same message. Some clients and most spam filters read it. |
What to leave out: card entry forms (never collect card data in an email), marketing offers, and anything that competes with the pay button for attention.
Layout rules that survive every client
- 600 pixels wide, single column. Wide enough for a line-item table, narrow enough to render unscaled in desktop preview panes. On phones, let the container go to 100 percent with a media query, and stack any side-by-side cells.
- Tables for structure, with
role="presentation". The role tells screen readers the table is layout, not data. Setcellpadding="0" cellspacing="0" border="0"on every one, then control spacing with padding on<td>elements. Padding on a<div>is unreliable in Outlook; padding on a cell is not. - Inline every style that matters. Font family, size, color, alignment, padding, background colors. Repeat the font family on every cell containing text; Outlook does not inherit it.
- Use a safe font stack.
Arial, Helvetica, sans-serifrenders the same everywhere. Web fonts work in Apple Mail and a few others and fall back elsewhere, which is fine as long as the fallback was designed for. - Set explicit line heights. Add
mso-line-height-rule: exactlynext to anyline-heightor Outlook will add space around large text. - Give every image width and height attributes and alt text. With images blocked, alt text and the reserved space keep the layout intact. Keep the logo small and never put the amount, the due date or the button in an image.
- Build the button out of a cell or a VML shape, not an image. A padded table cell with a background color and a linked, bold label renders everywhere. Outlook for Windows needs a VML
roundrectto make the whole button clickable; the template below includes both, wrapped in conditional comments so each client sees only its version. - Avoid background images and CSS shorthand tricks. Solid background colors on cells are safe; background images need VML fallbacks and are rarely worth it on an invoice.
- Keep the message under about 100 KB. Gmail clips larger messages and hides the rest behind a link, which is usually where your footer and sometimes your button end up.
Dark mode
Roughly a third of email opens now happen in dark mode, and clients handle it three different ways. Apple Mail and most iOS clients respect your styles and, if you provide them, your dark-mode media query. Outlook (desktop, Outlook.com and the mobile apps) rewrites your colors for you, sometimes inverting them, sometimes partially. Gmail on Android inverts colors it thinks are light. You cannot control every client, but you can make sure none of them produce something unreadable.
- Add
<meta name="color-scheme" content="light dark">and<meta name="supported-color-schemes" content="light dark">in the head. This tells clients that support it that you have thought about dark mode and stops some of the automatic rewriting. - Provide a
@media (prefers-color-scheme: dark)block that sets background and text colors explicitly. Use classes on the cells (the template usesbg-body,bg-card,text,muted) so the media query has something to target, and mark the rules!importantso they beat the inline styles. - Avoid pure black and pure white.
#1c1f23and#e6e9ecsurvive inversion far better than#000and#fff, which some clients flip completely. - Use a logo with a transparent background and a little padding, or a version that reads on both light and dark. A dark logo on a transparent background disappears in dark mode; a white box around it looks like a mistake.
- Keep the button color mid-tone. A saturated teal or blue reads on both backgrounds; a pale button vanishes when the background is inverted to dark.
The pay button and where it should go
The button should link to a hosted payment page that already knows the invoice: number, amount, customer, and which payment methods are allowed. The customer taps, sees the amount, enters a card or bank account (or uses a saved one), and is done. Everything that makes that link work is on the payment page's side, not the email's:
- Unique per invoice. The URL carries a token that identifies this invoice, so the amount cannot be edited and the page can show "paid" once it is.
- Hosted and tokenized. Card data is entered on the payment provider's page and stored as a token, so your business never touches it and stays out of PCI scope. See hosted checkout and tokenization.
- Customer-initiated. Because the customer enters the card themselves with address and security code, issuers approve at a higher rate and interchange is lower than the same card read out over the phone. CIT vs MIT explains why.
- Method choice. For large invoices, offer ACH next to card. A bank debit costs a flat fee instead of a percentage, and B2B customers often prefer it.
- Same link everywhere. Put the same URL as a QR code on the printed or PDF invoice, and send it by text for the reminder. One link, three channels.
Do not use a URL shortener for the button; several spam filters score them down. Link the button text directly and, if the link is long, that is fine.
Deliverability: getting into the inbox at all
The best-designed invoice does nothing from a spam folder. The rules for transactional mail are mostly about authentication and consistency.
- Authenticate the sending domain. SPF, DKIM and DMARC records on the domain in the From address. Gmail and Yahoo require all three from bulk senders and treat unauthenticated mail with suspicion from everyone. If a platform sends on your behalf, it will give you the records to add.
- Send from your own domain, consistently. The same From address for every invoice, and ideally a dedicated one such as
billing@orinvoices@, so customers can whitelist it and reply to it. - Keep the text-to-image ratio high. An email that is one large image of an invoice is the classic phishing pattern and is filtered as such.
- Include the plain-text part. Clients pick the HTML version when they can, and filters read the text version.
- Attach the PDF only if customers need it. Attachments are not penalized as such, but they increase size and some corporate gateways strip or quarantine them. A link to download the PDF from the payment page is usually better, and the email still carries everything needed to pay.
- Watch your reminder cadence. Reminders are transactional, but a customer who receives one every day will mark it as spam, which damages delivery to everyone at that provider. A sequence like due-date minus 3 days, due date, plus 7 and plus 14 is enough; see customer messaging for combining email and text reminders.
The template
A complete invoice email: 600 pixels wide, tables for structure, everything important inline, a media query for phones, a dark-mode block, a bulletproof button with a VML fallback for Outlook, and a preheader. Replace the business details, the amounts and the payment URL. This is how it renders:
|
And the code:
<!DOCTYPE html>
<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<title>Invoice 1042 from Northwind Plumbing</title>
<!--[if mso]>
<noscript><xml><o:OfficeDocumentSettings><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml></noscript>
<![endif]-->
<style>
/* Progressive enhancement only: everything important is inline. */
@media (max-width: 620px) {
.container { width: 100% !important; }
.stack { display: block !important; width: 100% !important; }
.px { padding-left: 16px !important; padding-right: 16px !important; }
}
@media (prefers-color-scheme: dark) {
.bg-body { background-color: #1c1f23 !important; }
.bg-card { background-color: #262a2f !important; }
.text { color: #e6e9ec !important; }
.muted { color: #a3aab2 !important; }
.rule { border-color: #3a4048 !important; }
}
</style>
</head>
<body class="bg-body" style="margin:0; padding:0; background-color:#eef2f5; -webkit-text-size-adjust:100%;">
<!-- Preheader: shows next to the subject in the inbox, hidden in the body -->
<div style="display:none; max-height:0; overflow:hidden; mso-hide:all;">
Invoice 1042 for $1,240.00 is due March 14. Pay online in under a minute.
</div>
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" class="bg-body" style="background-color:#eef2f5;">
<tr>
<td align="center" style="padding:24px 12px;">
<!--[if mso]><table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
<table role="presentation" class="container" width="600" cellpadding="0" cellspacing="0" border="0" style="width:600px; max-width:600px;">
<!-- Header -->
<tr>
<td class="px" style="padding:0 8px 16px 8px; font-family:Arial, Helvetica, sans-serif;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="text" style="font-size:20px; font-weight:bold; color:#264653;">Northwind Plumbing</td>
<td class="muted" align="right" style="font-size:13px; color:#6b7480;">Invoice #1042</td>
</tr>
</table>
</td>
</tr>
<!-- Card -->
<tr>
<td class="bg-card" style="background-color:#ffffff; border-radius:8px;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
<!-- Amount due -->
<tr>
<td class="px" style="padding:32px 32px 8px 32px; font-family:Arial, Helvetica, sans-serif;" align="center">
<div class="muted" style="font-size:14px; color:#6b7480; padding-bottom:6px;">Amount due</div>
<div class="text" style="font-size:36px; font-weight:bold; color:#264653; line-height:44px; mso-line-height-rule:exactly;">$1,240.00</div>
<div class="muted" style="font-size:14px; color:#6b7480; padding-top:6px;">Due March 14, 2026</div>
</td>
</tr>
<!-- Button -->
<tr>
<td align="center" style="padding:16px 32px 28px 32px;">
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://pay.example.com/i/1042" style="height:48px; v-text-anchor:middle; width:220px;" arcsize="12%" fillcolor="#2a9d8f" stroke="f">
<w:anchorlock/>
<center style="color:#ffffff; font-family:Arial, sans-serif; font-size:16px; font-weight:bold;">Pay invoice</center>
</v:roundrect>
<![endif]-->
<!--[if !mso]><!-->
<a href="https://pay.example.com/i/1042" style="display:inline-block; background-color:#2a9d8f; color:#ffffff; font-family:Arial, Helvetica, sans-serif; font-size:16px; font-weight:bold; line-height:48px; text-align:center; text-decoration:none; width:220px; border-radius:6px; mso-hide:all;">Pay invoice</a>
<!--<![endif]-->
</td>
</tr>
<!-- Line items -->
<tr>
<td class="px" style="padding:0 32px;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="font-family:Arial, Helvetica, sans-serif; font-size:14px;">
<tr>
<td class="muted rule" style="padding:8px 0; color:#6b7480; border-bottom:1px solid #e3e8ee;">Description</td>
<td class="muted rule" align="right" style="padding:8px 0; color:#6b7480; border-bottom:1px solid #e3e8ee;">Amount</td>
</tr>
<tr>
<td class="text rule" style="padding:10px 0; color:#333333; border-bottom:1px solid #e3e8ee;">Water heater replacement, labor</td>
<td class="text rule" align="right" style="padding:10px 0; color:#333333; border-bottom:1px solid #e3e8ee;">$640.00</td>
</tr>
<tr>
<td class="text rule" style="padding:10px 0; color:#333333; border-bottom:1px solid #e3e8ee;">50 gal. gas water heater</td>
<td class="text rule" align="right" style="padding:10px 0; color:#333333; border-bottom:1px solid #e3e8ee;">$600.00</td>
</tr>
<tr>
<td class="text" style="padding:12px 0; color:#333333; font-weight:bold;">Total due</td>
<td class="text" align="right" style="padding:12px 0; color:#333333; font-weight:bold;">$1,240.00</td>
</tr>
</table>
</td>
</tr>
<!-- Details -->
<tr>
<td class="px" style="padding:16px 32px 32px 32px; font-family:Arial, Helvetica, sans-serif; font-size:14px; line-height:22px;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="stack muted" width="50%" valign="top" style="color:#6b7480;">
<strong class="text" style="color:#333333;">Billed to</strong><br>
Jordan Reyes<br>
418 Maple St, Dover DE 19901
</td>
<td class="stack muted" width="50%" valign="top" style="color:#6b7480;">
<strong class="text" style="color:#333333;">Details</strong><br>
Invoice date: February 28, 2026<br>
Terms: Net 14<br>
Job #: 2026-0311
</td>
</tr>
</table>
<p class="muted" style="margin:20px 0 0 0; color:#6b7480;">
Prefer to pay another way? Reply to this email or call (302) 555-0142. Questions about a line item? We are happy to walk through it.
</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- Footer -->
<tr>
<td class="px muted" align="center" style="padding:20px 8px 0 8px; font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:18px; color:#8a939d;">
Northwind Plumbing · 12 Harbor Rd, Dover, DE 19901 · (302) 555-0142<br>
Payments are processed on a secure hosted page. We never ask for card details by email.
</td>
</tr>
</table>
<!--[if mso]></td></tr></table><![endif]-->
</td>
</tr>
</table>
</body>
</html>Notes on the parts that are easy to break:
- The
<!--[if mso]>blocks are read only by Outlook for Windows. The outer one wraps the content in a fixed-width table because Outlook ignoresmax-width; the inner one draws the button with VML. Do not remove the matching<!--[if !mso]><!-->wrapper around the HTML button or Outlook will show two buttons. - The preheader
<div>is hidden with several properties because different clients honor different ones. Keep it near the top of the body. - The dark-mode classes carry no styles in light mode. They exist so the media query can target the cells.
- The
stackclass on the two-column details block makes the columns stack on narrow screens. Outlook ignores it and shows two columns, which is fine at 600 pixels.
A testing checklist
Send the real message, with real data, to at least these clients before switching it on. Free accounts are enough.
- Gmail on the web and in the Android app, light and dark mode.
- Outlook for Windows (desktop) and Outlook.com in a browser.
- Apple Mail on iPhone, light and dark mode.
- One corporate mailbox behind a spam gateway if you have access to one.
Check that the amount and due date are readable in every one, the button is clickable across its whole area in Outlook, the layout survives with images turned off, the message is not clipped in Gmail, the subject and preheader read well in the inbox list, the plain-text version is present, and the payment link opens the right invoice. Then pay it yourself, from the phone, to see the whole path a customer will take.
Where FloPay fits
Everything above is what FloPay's invoicing already does for each invoice: an email and text with a hosted pay link, a customizable branded template (see branded documents) with the same link as a QR code on the PDF, automatic reminders on a schedule you set, and payments that post back to the invoice and to QuickBooks. The template on this page is close to the default layout, and you are welcome to use it whether or not you use the platform.
Send invoices that get paid from the phone
FloPay emails and texts each invoice with a hosted pay link, sends reminders automatically, and posts the payment back to the invoice and QuickBooks.
See Invoicing