HTML Tables in Emails—Everything You Need to Know
One of the biggest challenges in designing an HTML email is ensuring that it displays consistently for all users, across all email clients. That’s where using HTML tables for coding emails comes in handy. Here are some tips for how to correct common coding issues encountered with HTML tables, as well as other design best practices for HTML emails.
Why Use Tables to Code HTML Emails?
Although email and Web sites use the same technologies (HTML and CSS), coding for the structure of an email versus a Web site is different. Back in the 1990s, using <table> tags to structure Web pages was a common practice. Today, building a Web site involves marking up the content with HTML using semantic elements (e.g., header, footer, and paragraph tags), styling and adding structure to the content with CSS, and using JavaScript to add dynamic elements.
To lay out content, for example, Web designers typically apply such CSS properties as width, height, and margin to HTML elements. Using tags such as <div> and <section>, along with CSS to customize the layout and styling of tags, gives designers more flexibility and control over the look of Web pages. This type of coding works for Web design because a limited number of browsers handle most Web traffic and all of those browsers support HTML and CSS.
Coding for Gmail Versus Outlook
But that’s not the case for emails, which are read by dozens of different email clients (applications). And there are radical differences among the various email clients in their support of HTML and CSS: Each email client has its own rendering engine, which determines the code that it supports and how an email will be displayed.
In 2016, for example, Gmail started rolling out changes to support embedded CSS, as well as responsive email and media queries. However, many versions of the email client, Outlook, still don’t support CSS. Yet Outlook accounts for a sizeable portion of the email client share (7% as of April 2018, as tracked by Litmus).
Tips for Dealing With Common Coding Issues When Using HTML Tables to Design Emails
When it comes to email design, HTML table structure is universally supported by email clients. That’s why designers turn to HTML tables to lay out email campaigns. But there are some common problems associated with using HTML tables. Here are a few of the top coding mistakes frequently encountered with HTML tables and what you can do to avoid or correct them:
- Keep your email designs simple and “nested” tables to a minimum.
When using tables to build emails with complicated layouts, a method known as “nesting” is used, which involves creating tables within tables. The more complicated the email design, the more tables are nested within tables. As you can imagine, this practice sets up a situation that could easily lead to confusion and mistakes. A good rule of thumb is to limit the number of nested tables to between 4 and 6. In addition, minimize the number of columns in your emails because some email clients may add extra space to the table cells for each column, which can ruin an email layout. - Be sure to add in cellspacing and cellpadding table attributes—and set them to “0”—to overrule the default behavior of email clients. Because HTML tables were originally developed for creating a table in HTML and not for laying out content, most email clients add their own styles to HTML tables. This is a common reason why email designs don’t display as planned. And that’s why it’s important to pay close attention to the HTML table attributes when coding HTML emails, including width, alignment, cellspacing (space between cells), and cellpadding (space inside cells between the content and cell border).
- Use online tools and email templates to avoid mistakes, such as missing tags. When using HTML tables to code email designs, the tags for table (<table>), table cell (<td>), and table row (<tr>) are opened and then closed using the symbol “/”. Forgetting to close a table is another common coding mistake in email designs, which can interfere with the proper rendering of your emails in different email clients. Using email templates is one way to help avoid such mistakes. There are also tools available that can help detect missing tags in your email coding, as well tools to create email designs with the correct coding.
HTML Email Campaign Design Best Practices
Here are some additional design best practices for building successful HTML emails:
- Keep the maximum width of your emails between 600 and 800 pixels.
- Use cross-platform fonts such as Calibri, Times New Roman, and Arial.
- Don’t use JavaScript or Flash to create motion in your emails. Check out these FulcrumTech articles on this topic:
-
Don’t overuse the image (<img>) tag. Many of the popular email clients block images by default, so when designing an email, assume that images will be blocked and background images won’t load. Other reasons for not including too many images include:
- Images take longer to download than text and use more data
- Having a lot of images can land your email in the spam folder.
For the same reasons, it’s not a good idea to structure your emails as a single image.
- Design your emails with mobile users in mind, so that the emails can be easily scaled down for smaller screens. To learn more about responsive design, check out the FulcrumTech article, “Mobile Email Marketing—Does Responsive Design Pay Off?”
- Preview and fully test your email campaigns before sending to your entire email list. There are various online tools (e.g., from Litmus) available that can help you see how your email looks across different email clients and devices.
Need help ensuring that your emails are well designed and don’t encounter any rendering issues? The email-marketing experts at FulcrumTech can help! Contact us today to learn more!