An email-safe order confirmation template for an online store, written as plain HTML tables with inline styles and no framework. A serif wordmark header leads into a thank-you message, an order number and date panel, product rows with photos, a subtotal, shipping, tax and total table, shipping and billing addresses, and a rounded "Track your order" button.
How it works
A hidden .oc-preheader sets the inbox preview text. The outer .oc-wrap table paints the warm sand background and the .oc-container table holds the 600px message; an MSO conditional comment adds a fixed-width 600px table for Outlook desktop, which ignores max-width. All colors, fonts and spacing are inline style attributes, with bgcolor attributes as a fallback.
Each product is one row of the .oc-items table: an 80x80 image cell, a name, variant and quantity cell, and a right-aligned price cell. Images use width/height attributes, display:block and descriptive alt text. The .oc-totals table is a fixed 280px wide and right-aligned, with a dark rule above the total.
The address block in .oc-addresses uses the fluid hybrid technique: two .oc-col inline-block divs with max-width:272px sit side by side on wide screens and wrap on narrow ones without any media query, while MSO comments place them in two table cells for Outlook. The button is a bulletproof padded table cell (.oc-btn-cell) with an inline link (.oc-btn) and mso-padding-alt.
style.css adds progressive extras only: a hover color for .oc-btn-cell, a focus ring, and a mobile media query that trims .oc-pad padding, lets .oc-col use the full width and stretches .oc-totals to 100%.
Customization
- Accent color: replace
#b5562fin the header top border, the total amount, the address headings and.oc-btn-cellto rebrand. - Products: duplicate or delete a row of
.oc-items; keep the 80px image cell and theborder-bottomon each cell. The photos come from Unsplash; replace them with your own product images at 160x160. - Order meta: edit the order number and "Today, 9:41 AM" in the panel, or replace them with merge tags from your e-commerce platform.
- Totals: add a "Discount" row to
.oc-totalsby copying the "Tax" row; change the tablewidthfor longer labels. - Address columns: change
max-width:272pxon.oc-coland the MSO cell widths together if you change the padding of.oc-addresses. - Button shape: lower the
border-radius:30pxon.oc-btn-celland.oc-btnfor a squarer button.
Use cases
- Online stores: confirm an order with number, date and product rows with photos
- Retail checkouts: a totals table shows subtotal, shipping, tax and total
- Shipping updates: shipping and billing addresses are listed for the customer to verify
- Post-purchase flows: a rounded Track your order button leads to delivery status
Accessibility
Layout tables use role="presentation", the wrapper declares lang="en", and the content has a real <h1> and <h2> outline. Product images have meaningful alt text, prices are plain text next to item names, and link texts describe their target. Body text colors stay above WCAG AA contrast on white and sand backgrounds.
Usage notes
The patterns target Outlook 2016-2021 and Microsoft 365 on Windows, Outlook.com, Gmail (web and apps), Apple Mail and iOS Mail. Place the snippet in a full email document, copy style.css into a <style> block in the <head> and replace the sample data.
