Close this search box.
Close this search box.

HTML Emails

Use tables

Forget about divs. Email clients live in the past, so all emails must be built using tables for layout.

Cellpadding and Cellspacing

Instead of using the margin and padding CSS properties, we’re going to be using the cellpadding and cellspacing HTML attributes. Think of cellpadding as being pretty much the same as CSS padding – space inside an element, around the content. Cellspacing is the space between data cells on a table.

Cellpadding and cellspacing only apply to the parent table, not the children. If we don’t want any cellpadding or cellspacing, we need to specify that for every table.

Use Inline Styles

Forget about classes. If anything needs to be styled, use inline styles.

Elements like font type and size can be used within the <table> tag, but individual styles should be placed on <td>’s.


Here is a list of web safe fonts to help you out:

Font Windows Mac
Arial Black 98% 96%
Arial Narrow 88% 95%
Arial Rounded 59% 95%
Helvetica 7% 100%
Century Gothic 87% 53%
Verdana 99% 99%
Trebuchet 99% 97%
Tahoma 99% 91%
Gill Sans 58% 95%
Georgia 99% 97%
Palatino 99% 86%
Lucida Bright 76% 99%
Times New Roman 99% 97%
Courier New 99% 95%
Lucida Sans Typewriter 74% 99%
Copperplate 67% 92%
Papyrus 70% 92%

Statistics are from CSS Font Stack.


Some email clients (like canary), render all text fonts in black. Make sure you use !important for the colors.

Use absolute paths for images

Unlike regular web pages, you can’t just put all your images in a folder and then use relative pathways to link to them. All links must be absolute! When I’m developing an email, I usually host images on a subdomain of my own. When I’m ready to send out the email for a client, I move all the images to a subdomain of their website.

Give all Images Alt Tags

Styling the <td> for which images are in, with font types, size and color, will allow for your email to degrade gracefully when images are off by default.

Learning Resources