Because of this, we largely can\u2019t use the same coding principles used in web design. To ensure that emails display properly across most email clients, we have to use HTML tables to create the structure of an email campaign.<\/p>\n
Although this has been changing recently, especially with Gmail\u2019s major update<\/a> last year, some email clients still don\u2019t support a lot of HTML and CSS. The most notable: Microsoft\u2019s Outlook family of email clients, which use Microsoft Word as their rendering engine. Since Outlook is still hugely popular (currently #5 on our Email Client Market Share<\/a> tracker), email designers still have to use tables in some capacity if they want their campaigns to display properly for subscribers.<\/p>\n And when we have to rely on HTML tables, there are a number of things that can go wrong\u2026<\/p>\n One of the most common problems we see with using tables is overly complex layouts. This is especially true for legacy email templates that haven\u2019t been updated in a few years.<\/p>\n Until somewhat recently, most emails were built with a lot of tables. Tables within tables within tables\u2014a practice known as nesting.<\/p>\n When you nest multiple tables within another table, you\u2019re likely to introduce problems within your code. It\u2019s very easy to accidentally put a table in the wrong place or paste over an essential HTML tag when shifting things around. And for some clients (looking at you, Lotus Notes), you can see emails render poorly when you nest tables too deeply. It\u2019s for this reason we recommend building emails with a modular approach, something our friend Brian Graves wrote about<\/a>. And try to keep nested tables to a minimum. Nesting tables is nearly unavoidable, but keeping the nesting depth to 4-6 tables max will help avoid any problems.<\/p>\n Similar to complex nesting, overly complex designs can be problematic, too. It\u2019s not uncommon to see multiple column emails, but when you start adding too many columns to an email, you\u2019re setting yourself up for potential failure.<\/p>\n Some email clients have problems with even basic math. Certain versions of Microsoft Outlook are known to add extra spacing to table columns, breaking email layouts. While you may think that using four table cells set to 25% widths makes sense, Outlook will add extra space to those cells and cause the layout to be wider than 100%. The resulting email will drop some of those cells onto their own row, ruining your well-designed, perfectly-planned email campaign.<\/p>\n Keeping your email layouts simple helps to avoid potential problems with your campaigns and keeps your subscribers happy.<\/p>\n Emails typically have a lot of code in them. And most email teams work on very quick, tight schedules. This combination can lead to mistakes that can ruin an email campaign.<\/p>\n As a quick refresher, let\u2019s look at how HTML is written. HTML consists of tags that surround content. In most cases, proper markup requires both an opening and closing tag. Take this HTML table as an example:<\/p>\n You can see that there are three different tags: The table, table row, and table cell. These tags are opened, and then closed (denoted with the \/ symbol).<\/p>\n Although HTML is a forgiving markup language, email clients and their rendering engines often choke when HTML tags are missing. Unfortunately, missing closing tags is an all-too-common problem in emails. Those fast turnaround times can lead to email designers coding too fast and forgetting to close out a table, row, or cell. While this can be fine in some clients, in others it will lead to broken campaigns.<\/p>\n Tools like the W3C Markup Validation Service<\/a> can help identify any missing tags. Missing tags and improperly formed markup are also why we recommend using email templates or tools like Builder\u2019s Partials and Snippets<\/a> to help create emails. They not only help ensure that your code is well-written and properly tested, but have the added benefit of speeding up your workflow\u2014allowing you to hit those tight deadlines and keep your team happy.<\/p>\n Just like missing tags can cause problems, missing HTML attributes on tables can lead to funky looking designs.<\/p>\n HTML attributes are additional properties that can be set on HTML tags. These properties control things like element widths and heights, alignment, and even spacing. Unexpected spacing around table cells is one of the most common problems you\u2019ll see with HTML tables.<\/p>\n Nearly all email applications (and web browsers) add their own styles to HTML tables. HTML tables are traditionally used to display tabular data and weren\u2019t originally intended for laying out and designing content. Because of this, we need to override the default behavior of browsers and email applications to ensure tables display properly.<\/p>\n By adding in the cellspacing and cellpadding attributes to the table\u2014and setting both to zero\u2014we can be sure no email clients will add extra space to or around any table cells.<\/p>\n Likewise, if you are encountering problems with table widths or the alignment of table content, you should look to make sure that you didn\u2019t forget the width or align attributes on tables or table cells.<\/p>\n Want to learn how to troubleshoot your own email campaigns and avoid any embarrassing problems for your subscribers? Join us at Litmus Live for a full workshop on troubleshooting email like a pro. We\u2019ll go over the most common email pitfalls, their solutions, and the best methods for troubleshooting campaigns.<\/p>\nMaking things complicated<\/h2>\n
![\"HTML](\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/what-could-go-wrong-nesting-1.png\")
![\"HTML](\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/what-could-go-wrong-columns.png\")
Missing tags<\/h2>\n
<table>\n <tr>\n <td>\n <\/td>\n <\/tr>\n <tr>\n <td>\n <\/td>\n <\/tr>\n <tr>\n <td>\n <\/td>\n <\/tr>\n<\/table><\/code><\/pre>\nMissing attributes<\/h2>\n
<table cellpadding=\"0\" cellspacing=\"0\">\n<\/table><\/code><\/pre>\nLearn how to troubleshoot<\/h2>\n
![\"Litmus](\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/tedc16-tickets.png\")
<\/td>\n