Developing HTML Emails Using Divs and “Ghost Tables” (2022)

Developing HTML Emails Using Divs and “Ghost Tables” (1) Paul Airy

Read Time: 8 mins

Email DesignEmail Templates

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 tablesdon’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 tablesand divs. Doing so enables you to deliver emailsthat render perfectly in Microsoft Outlook, and, allows you toleverage all the flexibility that divsoffer. 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 thenwalk 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 tableshave 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 aword 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 elaboratelayouts. 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 theMicrosoft Word rendering engine. As thisrendering engineis 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.”
Developing HTML Emails Using Divs and “Ghost Tables” (2)Developing HTML Emails Using Divs and “Ghost Tables” (3)Developing HTML Emails Using Divs and “Ghost Tables” (4)

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 tableconsists of three elements:

(Video) Live coding an email with Jason Rodriguez

  1. A <table> element (table)
  2. A <tr> element (table row)
  3. A <td> element (table data cell, oras it’s more commonly referred to, atable 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 cellsthat are wrapped within the tablescontain 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 andalign, 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 tablesare 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,cellspacingandborder. Additional attributes, such aswidthandalign, 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]-->conditionalcomment, 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:

(Video) Email Design Podcast #91: Building Litmus' Latest Newsletter Without HTML Tables

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

Internal CSS

Internal CSS is used to style ghost tablesand their respective cells. This internal CSS is wrapped within the same type of Microsoft conditional comments as those wrapped around the ghost tablesand 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 divsand 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 divsthemselves 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 divswithin 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 divshave 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 ltrapplied 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 subscribers might be affected by email which their client doesn’t support.

HTML Email Template Resources on Tuts+

  • 15+ MailChimp Templates for Every Purpose and OccasionPaula Borowska14 Jun 2022
  • 18 Best Digital Marketing Email Newsletter Templates for 2022 CampaignsMarc Schenker16 Feb 2022
  • Best Mailchimp Templates to Level Up Your Business Email Newsletter 2022Brad Smith24 May 2022
  • Mastering MailChimp: Best Templates and Email Tips for MailChimp NewslettersBrittany Jezouit10 Sep 2018
  • Build an HTML Email Template From ScratchNicole Merlin15 Jun 2022
(Video) ✉️ Custom HTML emails with an email expert

Did you find this post useful?

Yes No

(Video) Styling Emails Using HTML and MJML Framework – Elizabeth de Almeida – Virtual Coffee Brownbag

Developing HTML Emails Using Divs and “Ghost Tables” (35)

Paul Airy

Yorkshire, United Kingdom

Follower of Jesus, husband, father, and specialist in the design and development of HTML emails, with a particular fondness for typography. #EmailGeek

FAQs

What is a ghost table HTML? ›

Hybrid tables are also sometimes called ghost tables, because they are invisible to clients other than Outlook for desktop. By creating a ghost table with two columns, or TDs, we can force Outlook to display the columns side-by-side no matter what.

Should I use tables for email HTML? ›

So, you can code some of your emails using modern CSS. But if you need to support most versions of Microsoft Outlook, you'll need to use some form of tables, too, if you want your email to look reasonably good. The one exception to this rule is if you're using plain text emails, which don't use HTML and CSS at all.

How do you create a table in HTML email? ›

To do the same in your HTML emails, the process is simple. Just create a table element and set its role, border, and cellspacing attributes. Then create a table row containing a table data cell. Place the bgcolor attribute within the opening tag of the <td> element and set it to a CSS color, like #00A4BD.

Do DIVS work in Outlook? ›

As we've already mentioned, Outlook doesn't support styling inside of <div> tags. So, when an email renders in Outlook, the <div> sections will assume the height of the text inside of them, and 100% width, even if you specify a height/width for them in code.

Can I use email CSS? ›

The short answer here is yes, you can use CSS in traditional HTML emails.

Why does my email look like code? ›

General Questions Updated on April 8, 2022

1) Some email programs will display multi-part messages as garbled code or an attachment if an email message doesn't contain both HTML and plain text content. To avoid this add either plain text or HTML content to your campaign if one or the other is missing.

Are HTML tables still used? ›

This was commonly used because CSS support across browsers used to be terrible; table layouts are much less common nowadays, but you might still see them in some corners of the web. In short, using tables for layout rather than CSS layout techniques is a bad idea.

Why are tables the preferred option for creating layouts in HTML email? ›

As different email service providers have different policy to HTML emails and CSS, it is safer to use HTML table as layout in emails, as CSS (even with inline CSS) may be blocked / filtered, or even worse, half-blocked.

Can I send HTML emails from Outlook? ›

On the File tab, choose Options > Mail. Under Compose messages, in the Compose messages in this format list, click HTML, Plain Text, or Rich Text.

How do I code an HTML email in Outlook? ›

Steps
  1. Create an HTML template, use existing HTML code, or search for a pre-formatted HTML template.
  2. Insert the HTML file into your Outlook email message. View written steps. ...
  3. (Optional) Send a test HTML message and improve, if needed.
  4. Send the final version of your HTML message to your Office 365 Group or Google Group .
7 May 2020

What is a ghost table? ›

The Ghost Dining Table has an angular steel base, legs with precise lines, and a beveled tabletop that creates a bold minimalist design. The table has a modern concrete-finish top, perfect for any contemporary environment. The top is treated with a wax for ease of care, allowing for use in a covered outdoor setting.

How do I make an HTML email from scratch? ›

How to create an HTML email
  1. Open an application where you can type HTML code. ...
  2. Begin your HTML document type. ...
  3. Create the body and main table. ...
  4. Design the email template structure and header. ...
  5. Create the content area. ...
  6. Change the style of the email template footer. ...
  7. Style the text. ...
  8. Test the email.
2 Nov 2021

How do I send an email in tabular format? ›

Re: Send email with Tabular data in Email body

Simplest way is to send an HTML Email (Body Type = text/html) and put a HTML <TABLE> in Body of Email. Regards.

How do you create a HTML table with multiple rows in an email body dynamically using Java? ›

How to Send Dynamic HTML Formatted Table in Email Body?
  1. Make two input argument for sender and receiver.
  2. Get records guid {In my case, all required GUID in text box using java script }
  3. Design HTML table tag as per requirement.
  4. Convert HTML string to Base.
  5. Create email activity.
  6. Add attributes subject,from,to,email body.
26 Aug 2018

Does CSS work in HTML emails? ›

CSS will work in HTML email but it has limitations. In general, very simple CSS is always best when you code for email. These are our recommendations for how to use CSS in HTML email and some information to help you troubleshoot CSS-related issues.

How do you style an email in HTML CSS? ›

How to be successful with CSS in HTML emails
  1. Use inline CSS. If you are set on using CSS, your best bet is to use inline code. ...
  2. Avoid embedded and external CSS in HTML emails. ...
  3. Stay away from background images. ...
  4. See which platforms your audience is using. ...
  5. Don't use CSS at all.

Do emails support CSS grid? ›

There is nothing stopping you from creating an email that is completely laid out with CSS grid.

What is gibberish email? ›

When you get a message, Gmail tries to guess what encoding the sender used so that it can properly open and display the message. If Gmail guesses wrong, you usually end up with a screen full of gibberish because the message wasn't translated properly from one encoding to the other.

How do you tell if an email is plain text or HTML? ›

The simplest explanation is that an HTML will contain images and colors while a plain text email contains no images, no graphics, and no formatting.

Why are some emails scrambled? ›

An email with garbled text can be caused by the use of non-standard email system, which does not specify the message encoding scheme, by the sender. To view the email, you can select a suitable character set in the browser.

How do I make email columns? ›

On the View tab, in the Current View group, click View Settings. In the Advanced View Settings dialog box, click Columns. In the Show Columns dialog box, in the Available columns list, click a column name, and then click Add.

How do I create a table in Gmail? ›

How to Add a Table To Gmail - YouTube

What can I use instead of a table in HTML? ›

Replace HTML tables with <div>s. In the era of responsive web design the old trend of building websites using HTML tables can't be used anymore. You have to use div tags and style them as required.

What type of table should not be used in HTML5? ›

If the data is tabular, use tables; if the content of the table is presentational, don't use tables.

What are HTML tables good for? ›

A table in HTML makes a lot of sense when you want to organize data that would look best in a spreadsheet. An HTML table is a great way to display things such as financial data, calendars, pricing, feature comparison, the nutrition facts information panel, bowling scores, and many other tabular data.

How do I layout my email? ›

Email Design Best Practices
  1. Craft a strong subject line.
  2. Write an attention-grabbing pre-header.
  3. Be concise.
  4. Keep your email on-brand.
  5. Think about your layout.
  6. Personalize every email.
  7. Incorporate unique visual content.
  8. Don't be afraid to use emojis.
25 Sept 2020

What is the layout of an e mail? ›

The layout is the look and feel of the email (i.e. overall appearance), while the structure is the order in which the elements are arranged. The structure makes the email feel connected when putting together.

What are the layout features of an email? ›

Email layouts generally fall into three groups: single-column, multiple-column, or a hybrid. Whichever you choose, the important thing is to keep the design simple and mobile-optimized.

› blog › html-tables-in-email-wha... ›

Each email application has its own rendering engine which determines what code is supported and how emails are displayed. The bad news for us is that all of tho...
You can't have a table without these three components. There are other table-related tags (header, footer and body), but these are less common in email deve...
Learn the most common coding issues when using HTML tables in email-marketing campaigns and how to easily correct them to make your emails more responsive.

How do I add a table of contents in Ghost blog? ›

Create a heading in Ghost by selecting your heading text and clicking the H icon in the popup editor. There are two parts to the Tocbot library: 1) a JS file that handles functionality and 2) a CSS file that handles basic styling. Both need to be loaded into your Ghost theme.

Videos

1. Day 06 - Content Creation
(SFMCTrailblazers)
2. Email Design Podcast #25: Absolute Positioning in Email, Fixing Lines in Outlook, and Email Salaries
(Litmus)
3. Mark Robbins – Pushing the Envelope of Email – All Day Hey! Live 2021
(Hey! Presents)
4. Zoho Campaigns - Expert Diaries 11 - Things to know while designing your email campaigns
(Zoho)

Top Articles

Latest Posts

Article information

Author: Gregorio Kreiger

Last Updated: 01/17/2023

Views: 5499

Rating: 4.7 / 5 (57 voted)

Reviews: 88% of readers found this page helpful

Author information

Name: Gregorio Kreiger

Birthday: 1994-12-18

Address: 89212 Tracey Ramp, Sunside, MT 08453-0951

Phone: +9014805370218

Job: Customer Designer

Hobby: Mountain biking, Orienteering, Hiking, Sewing, Backpacking, Mushroom hunting, Backpacking

Introduction: My name is Gregorio Kreiger, I am a tender, brainy, enthusiastic, combative, agreeable, gentle, gentle person who loves writing and wants to share my knowledge and understanding with you.