When it comes to designing your emails, you need to know they will display consistently no matter what email client or device your readers use.
“Design adds value faster than it adds costs.” – Joel Spolsky
One great way to do that is with HTML tables… but it’s fiddly. In this article, we’ll take a look at the best ways to tackle the problem of HTML tables in email.
Read on to learn more about HTML tables in email and more specifically:
- Why it makes sense to use tables
- Designing for different email clients
- Padded cells (no, you’re not going crazy)
- When to Use Nesting
- Working with templates
Let’s dig in.
Why Use Tables in HTML Emails?
There’s no sense in carefully designing and tweaking a beautiful email, only to have it display in a completely different way for everyone on your list, depending on the email client they’re using.
One effective way to get around this challenge is to use HTML tables when coding your emails. That’s because HTML email tables are highly reliable, giving you a way to structure the email in such a way that nearly all rendering engines process and display them in the same way.
Plus, all major email clients support HTML, which isn’t something you can say about CSS – another highly popular type of code used for web pages.
While tables are an effective way to control the structure, you need to use them correctly. Any small mistakes in the code will lead to some pretty interesting results on the screen.
Let’s take a look at some of the most important considerations.
Close the Table Behind You
Missing tags are a big problem when you’re creating HTML code, especially when using tables. You need to remember to use opening and closing tags, e.g. <table> / </table> (for the whole table), <td> / </td> (for table cells), and <tr> / </tr> (for table rows).
Pay close attention to your lines of code and consider using a specialist tool that will help you detect and locate any missing tags.
Keeping it Simple
If your emails contain a lot of information or involve complicated layouts, you may end up in a situation where you’re putting tables inside other tables. This is known as nesting.
Nesting is really confusing. Frankly, it’s difficult to trace through the code and make sure that every line is properly structured and rounded off, and you may well drive yourself nuts searching for the missing tag or whatever that’s causing the whole thing to break.
As a general rule, avoid using more than about four or five nested tables in any one email, and make sure you aren’t using too many columns. The former is confusing and the latter can mess with the overall layout.
Padding Your Cells
Two things to remember here…
Firstly, you need to set table width, cell spacing (as in, the space between individual cells) and cell padding (how much space there is between the content and the outer edges of each individual cell) in your tables to make sure that these display in neat, consistent ways.
Your margins and paddings are extremely important as these are what stop text and any other content in your tables from looking squished or running into each other.
Secondly, set your cell spacing and cell padding attributes to 0. This will override whatever default settings individual email clients have set up. Without it, the email client will apply its own styles to your HTML tables, which can cause all kinds of weird and not-so-wonderful results.
Final Thoughts: Working with Templates
Writing your own email HTML code gives you the freedom to create exactly the layout you want, but it’s not for the fainthearted. Especially once you bring tables into the mix.
Unless you have something highly specific in mind, you may find that it cuts out a lot of stress to use a tried-and-tested, existing template. A platform like EmailOut, for example, comes with hundreds of options, and you can adapt them to your own branding and needs – all for free.