Article first published in July 2007, Updated April 2019
I would like to preface this article by stating that I use standards-based markup to build my HTML emails and my websites. However, those of you who are familiar with other articles posted here at Campaign Monitor about HTML emails will know that standards-based markup results in formatting, not unlike rich-text format (RTF) in many popular email clients. I’m comfortable with this, and so are my clients, once they learn about how web standards ensure accessibility and cross-client/platform/device content-compatibility and help emails reach legitimate subscribers without being eradicated by spam filters.
But not every web designer has the grace and charm of Mark Wyner, and, therefore, many face clients and bosses who demand they build HTML emails for design integrity at any cost.
So, for those of you who must use tables in your HTML emails, I have some information about how they perform across the board. I ran some tests and discovered that, while I couldn’t find a perfect solution, I did manage to collect some useful tips to make your tables behave, for the most part.
Tables in HMTL Emails: Nesting, Padding, and Widths, Oh My
One of the most critical aspects of your email campaign is the call to action (CTA). Once your reader opens the email and finishes reading it, you want a response from them. There are plenty of tips and tricks to optimize your CTA in order to get the desired response from your readers. One of them is to ensure that your email is displayed as you would like on different devices.
Getting your email to display as desired can be challenging. When an email gets sent to different devices, sometimes images go missing. Other times, text isn’t displayed correctly. This is why coding for emails is so necessary.
Why use HTML email tables?
Html email tables can be considered a developer’s best friend because of their reliability. Different email applications have a variety of rendering engines, and these ultimately affect how an email is displayed. HTML tables are used to structure an email, and this helps to ensure that the emails are displayed in the desired way across some email clients.
Table Math, Meet Box-Model Math
When one places table widths, td widths, td padding and CSS padding into a blender, the results are quite chaotic and inconsistent. Take, for example, the following table:
Just as intended, the resulting width of this table is 400 pixels and the width of the columns are 100 and 300 pixels:
<table cellspacing="0" cellpadding="0" border="0" width="400">
Just as intended, the resulting width of this
table is 400 pixels and the width of the columns are 100 and 300 pixels:
But when some padding is added—via either CSS or HTML—the widths of the columns are compromised:
table width is kissed good bye, the results are not unlike a CSS box model. If padding is added to the original example and the
table width is removed, the code looks like this:
<table cellspacing="0" cellpadding="10" border="0">
And, as intended, the resulting widths are correct for both the
table and the columns:
But note how the
td widths were reduced to accommodate the new padding. This is just like the CSS box model in which 100 pixels wide + 10 pixels padding = 120 pixels total.
Building an effective HTML email template
Building an HTML email is challenging for many developers. Opting for a ready-made html email template, such as the ones available on Campaign Monitor, can save a lot of time, but for developers who would like to challenge themselves, there are few crucial factors they’ll need to keep in mind before building your own template.
1. Consider the email clients
Not so long ago, most mobile users were accessing their emails through their Blackberry devices. However, times have changed. Now your readers not only have different mobile devices, but there is also a multitude of email clients.
To get an idea of popular email clients, Campaign Monitor provides regular updates. Understanding these statistics will form the bases for your template. This will also help you to know which email clients you’ll need to test for before sending the email out.
Source: Campaign Monitor
2. Nest your tables
Nesting can be defined as placing a table area inside another table area, and, as a result, table tags can get a little complex. This is ideal for more complicated tables coding, as it will help you to get the desired layout. With nesting, remember to first close your tables with the typical </tr> and </table> before starting to close the cells inside.
If a table is nested inside another, the rules above apply, except a couple of essential variances:
- Yahoo Mail (new), Gmail, Outlook 2007, and Eudora apply extra width to account for borders. However, only when they are nested, as the parent table behaves appropriately.
- Applying widths to td tags that also have CSS or HTML padding creates confusion across the board. Nearly every client renders the widths in its own unique fashion.
- Even without any borders, there are variances in width by 2–4 pixels for a nested table width two columns. My tests were inconclusive as to the rhyme and reason behind this unnatural phenomenon.
3. Your paddings and widths are essential
Margins and paddings are vital, as they help to prevent your images and texts from running into each other.
There are plenty of ways to achieve this.
- With <div> tags, margins can be used: <div style=“margin:5px;”>
- With <td> tags, padding can be used: <td style=”padding:5px;”>
You can always play around with the coding to see which outcome you prefer. Emma highlights that using the padding attribute in <div> tags will strip them from Outlook 2007 and 2010.
It is also important to assign width, as missing this step will result in the content displaying differently across email clients.
- Yahoo Mail
- Yahoo Mail Beta
- Windows Live Hotmail (old)
- Windows Live Hotmail (new)
- Apple Mail
- Outlook 2007
- Outlook 2003
- Outlook Express
- Lotus Notes
Can I use divs in an HTML email?
Coding your email using divs makes life a lot easier, as there are no tables involved. This makes the email much faster to develop and much easier to read.
While these pros are noteworthy, going the divs route has its challenges:
- Difficulty with controlling spacing.
- Some email clients won’t be able to interpret it
- Some of your CSS will fail
Deciding to code your own HTML email tables is no small task. Understanding some of the challenges will help to ensure that you’re well prepared and that your emails will display as you would like them to across different email clients.
Please do your best to educate your clients/bosses about how the benefits of standards-based markup far outweigh design integrity across the board. However, if you fall short of convincing them and are forced to use tables for layout, take note of the lessons outlined in this guide.
Opting for a ready-made html email template, such as the ones available on Campaign Monitor, can save a lot of time.