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.

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