HTML Tables in Emails—Everything You Need to Know

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:

  1. 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.
  2. 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).
  3. 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:

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!

Other Articles You Might Like

Sign Up for NewsLever

Our free, monthly email newsletter

NewsLever is our free, monthly e-newsletter for B2B and B2C professionals who want to develop and implement powerful email-marketing campaigns that build relationships with prospects and customers.

  • This field is for validation purposes and should be left unchanged.

Privacy Policy|Learn More|Current Issue