Developing HTML Emails Using Divs and “Ghost Tables”

HTML emails have always been developed using <table> elements, and only <table> elements. Until now. The fact is, only Microsoft Outlook requires you to use tables for HTML structure; all other email and webmail clients support the use of <div>s for this purpose.

Divs have several advantages over tables. They’re more flexible to work with, supporting CSS properties that tables don’t (such as float) and unlike tables, they don’t create issues for subscribers using assistive technologies, such as screen readers.

Introducing Ghost Tables

It’s perfectly possible to develop HTML emails using tables and divs. Doing so enables you to deliver emails that render perfectly in Microsoft Outlook, and, allows you to leverage all the flexibility that divs offer. You can achieve this by transforming HTML email tables into HTML email “ghost tables” (tables that only versions of Microsoft Outlook render) and wrapping them them around divs that all email and webmail clients render.

In this tutorial, I’ll walk you through each of the essential elements, attributes, and styles necessary for developing HTML email tables. I’ll then walk you through each of the essential elements, attributes, and styles necessary for developing HTML email ghost tables, and their associated divs. However, before I do, allow me to give you some background as to why tables have to be used in the first place.

Why We Need Tables to Develop HTML Emails

Microsoft Word, released in 1983, was originally designed and developed as a word processor, a tool for creating simple text documents. Since then, Microsoft has developed it further, enabling its users to create complex text and image documents with elaborate layouts. To create a layout in Microsoft Word you have to insert a table then divide it into rows and cells to form its structure. You’re then able to populate your layout (or structure) with your content.

Microsoft Word has been built into every version of Microsoft Outlook for Windows since the release of Microsoft Outlook 2007, in the form of the Microsoft Word rendering engine. As this rendering engine is essentially “Word in Outlook”, in order to create a functional email layout you have to insert a table, just like in Microsoft Word. However, as we’re dealing with email, you need to build it with HTML and insert it by sending it via an email service provider.

“Since the release of Microsoft Outlook 2007, in 2007, all versions of Microsoft Outlook on Windows have used the Microsoft Word rendering engine.”

Microsoft Outlook versions that use the Word rendering engine:

• Microsoft Outlook 2007
• Microsoft Outlook 2010
• Microsoft Outlook 2013
• Microsoft Outlook 2013 120 DPI
• Microsoft Outlook 2016
• Microsoft Outlook 2019
• Windows 10 Mail

Developing HTML Email Tables

Now let’s look at the elements, attributes and styles necessary for developing an HTML email table.

Elements

An HTML email table consists of three elements:

1. A <table> element (table)
2. A <tr> element (table row)
3. A <td> element (table data cell, or as it’s more commonly referred to, a table cell)

Tables may contain multiple table cells, on multiple table rows, and those table cells in turn may have tables nested within them. As such, tables are “building blocks”, which when nested within, or positioned above or below each other, form the structure of an email. The table cells that are wrapped within the tables contain the emails’ content.

<table> <tr> <td> // Email content // </td> </tr>
</table>

Attributes

Inserted inside the opening <table> tag are the table attributes: role, cellpadding, cellspacing and border. The attributes are defined as follows:

• role="presentation": defines the <table> as being presentational, rather than using data, preventing it from creating issues for subscribers using assistive technologies, such as screen readers.
• cellpadding="0": removes the default cellpadding, preventing gaps appearing around the content of each table cell.
• cellspacing="0": removes the default cellspacing, preventing gaps appearing between each each table cell.
• border="0": removes the default borders, preventing borders from appearing in the table.

Additional attributes, such as width and align, may also be inserted inside the opening <table> and <td> tags.

<table role="presentation" width="600" align="center" cellpadding="0" cellspacing="0" border="0"> <tr> <td width="100%"> // Email content // </td> </tr>
</table>

Styles

Inserted inside the opening <td> tag, is the inline CSS that styles the table cell, (the <td>), and its content. The text styling will be inherited by all the paragraphs within the <td>, unless the paragraphs themselves have inline CSS overriding those styles, applied to them, inside their respective opening <p> tags. The style margin:0; is applied inside each opening <p> tag to remove the default spacing applied to paragraphs.

<table role="presentation" width="600" align="center" cellpadding="0" cellspacing="0" border="0"> <tr> <td width="100%" style="font-family:Arial, sans-serif; font-size:16px; line-height:1.5em; color:#333333; padding:2em; background-color:#e4e4e4;"> <p style="margin:0;">Paragraph of text.</p> </td> </tr>
</table> 

Developing HTML Email Ghost Tables

As HTML email ghost tables are only rendered by versions of Microsoft Outlook, you only need to take versions of Microsoft Outlook into account when developing their elements, attributes, and styles.

Elements

An HTML email ghost table consists of the same three elements as a standard HTML email table. The only difference is that its opening and closing <table>, <tr> and <td> tags are wrapped within Microsoft conditional comments. 

Code wrapped within Microsoft conditional comments is only rendered if the opening comment is true. In this example, the Microsoft conditional comment is <!--[if true]>, which states that if it’s true (that the email is being opened by any version of Microsoft Outlook) then the code within it should be rendered. You can configure the opening comment to render code on specific versions of Microsoft Outlook, or none at all, but that’s a whole other tutorial!

<!--[if true]>
<table> <tr> <td>
<![endif]--> // Email content // <!--[if true]> </td> </tr>
</table>
<![endif]-->

Attributes

As with HTML email tables, inserted inside the opening <table> tag are the table attributes, role, cellpadding, cellspacing and border. Additional attributes, such as width and align, may also be inserted inside the opening <table> and <td> tags.

<!--[if true]>
<table role="presentation" width="600" align="center" cellpadding="0" cellspacing="0" border="0"> <tr> <td width="100%">
<![endif]--> // Email content // <!--[if true]> </td> </tr>
</table>
<![endif]-->

The <div>

The <div> is inserted after the first <![endif]--> conditional comment, and before the second <!--[if true]> comment. This <div> contains the email’s content.

<!--[if true]>
<table role="presentation" width="600" align="center" cellpadding="0" cellspacing="0" border="0"> <tr> <td width="100%">
<![endif]--> <div> // Email content // </div>
<!--[if true]> </td> </tr>
</table>
<![endif]-->

Styles

Two types of CSS are used to apply styling to ghost tables and divs:

• Internal CSS, to style ghost tables, and their respective table cells.
• Inline CSS, to style divs and their content.

Internal CSS

Internal CSS is used to style ghost tables and their respective cells. This internal CSS is wrapped within the same type of Microsoft conditional comments as those wrapped around the ghost tables and their respective cells. Styles applied here typically relate to their structure, not their content, such as their width and background-color, as in the following: 

<!--[if true]>
<style type="text/css"> td.one_Cln_1_6 {padding:2em !important; background-color:#e4e4e4 !important;} </style>
<![endif]-->

The classes defined within the internal CSS are applied to the relevant ghost tables and cells.

<!--[if true]>
<table role="presentation" width="600" align="center" cellpadding="0" cellspacing="0" border="0"> <tr> <td class="one_Cln_1_6">
<![endif]--> <div> // Email content // </div>
<!--[if true]> </td> </tr>
</table>
<![endif]-->

Inline CSS

Inline CSS is applied to style the divs and their content, in much the same way as a <td> within a standard HTML email table. Structural styles, such as width, are not rendered by versions of Microsoft Outlook, as the divs themselves are not recognised or rendered by Microsoft Outlook. Their content, and therefore their text styles, such as font-family are, however.

<!--[if true]>
<table role="presentation" width="600" align="center" cellpadding="0" cellspacing="0" border="0"> <tr> <td class="one_Cln_1_6">
<![endif]--> <div class="one_Cln_1_6" style="width:auto; max-width:32em; font-family:Arial, sans-serif; font-size:16px; line-height:1.5em; color:#333333; padding:2em; background-color:#e4e4e4;"> <p style="margin:0;">Paragraph of text.</p> </div>
<!--[if true]> </td> </tr>
</table>
<![endif]-->

Harnessing the Power of Ghost Tables

Once you’ve grasped how to work with ghost tables, and their respective table cells, you can then begin to harness the power of divs within email. I’ll conclude this tutorial by looking at one skill–the use of float. Take a look at the following:

<!-- Two Column 1-6 Open -->
<!--[if true]>
<table role="presentation" align="center" cellpadding="0" cellspacing="0" border="0"> <tr> <td class="two_Cln_1_6">
<![endif]--> <div class="two_Cln_1_6" style="width:auto; max-width:32em; margin:0 auto; overflow:auto;"><!--[if true]>
<table role="presentation" align="center" cellpadding="0" cellspacing="0" border="0"> <tr> <td class="two_Cln_Lft_Cln_1_3" valign="top">
<![endif]--> <div class="two_Cln_Lft_Cln_1_3 ltr" style="font-family:Arial, sans-serif; font-size:16px; line-height:1.5em; color:#333333;"> <p style="margin:0 0 1em 0;">Left paragraph of text.</p> </div>
<!--[if true]> </td> <td class="gtr_1">&nbsp;</td> <td class="two_Cln_Rgt_Cln_4_6" valign="top">
<![endif]--> <div class="gtr_1 ltr"></div> <div class="two_Cln_Rgt_Cln_4_6 ltr" style="font-family:Arial, sans-serif; font-size:16px; line-height:1.5em; color:#333333; padding:0;"> <p style="margin:0 0 1em 0;">Right paragraph of text.</p> </div>
<!--[if true]> </td> </tr>
</table>
<![endif]--> </div>
<!--[if true]> </td> </tr>
</table>
<![endif]-->
<!-- Two Column 1-6 Close -->

In this example, ghost tables, cells and divs have been used to structure a left and right column. Classes have been applied to each of the <td> and <div> elements, with a class of ltr applied to the left and right divs. The internal CSS applied to them, .two_Cln_Lft_Cln_1_3.ltr {float:right !important;} and .two_Cln_Rgt_Cln_4_6.ltr {float:left !important;} respectively, switches the left column to the right, and vice-versa.

<style type="text/css"> .two_Cln_1_6 {padding:0 2em !important;} .two_Cln_Lft_Cln_1_3.ltr {float:right !important;} .two_Cln_Rgt_Cln_4_6.ltr {float:left !important;} </style> <!--[if true]>
<style type="text/css"> td.two_Cln_1_6 {width:36em;} td.two_Cln_Lft_Cln_1_3 {font-size:16px; width:15.5em !important;} td.two_Cln_Rgt_Cln_4_6 {font-size:16px; width:15.5em !important;} td.gtr_1 {width:1em;} </style>
<![endif]-->

Conclusion

The implementation of ghost <table>s, <td>s and <div>s allows you to structure emails for versions of Microsoft Outlook, without being restricted by their limitations. It’s more work than you might be used to when building for the web, but the extra effort will pay off. Check your analytics to see how many users might be affected by email which their client doesn’t support.

HTML Email Template Resources on Tuts+