How to Create HTML Emails Using the Table Element [+ Templates]

Although emails and web pages are both built with HTML and CSS, coding emails is different from coding web pages. That’s because email applications adhere to different standards than web browsers.

Each email application has its own rendering engine that supports different HTML tags and CSS properties — and therefore determines how emails are displayed. Microsoft’s Outlook, for example, uses Microsoft Word as its rendering engine, which does not support the CSS padding property, among other things. Gmail, on the other hand, does. 

Because email applications render emails in different ways, email marketers can’t take the same approach to coding as web designers or developers. Instead, they have to use the HTML table element to create emails and inline CSS to style them. Let’s walk through the process below.

HTML Email Table Template

An HTML email is made up of multiple table elements. Each table element represents a different section of the email, including the header, body, and footer.

Below is a very basic HTML email table template.

Notice there is a div with the id name of “email". This div contains three tables: each representing the header, body, and footer of the email. These are the essential building blocks of an HTML email.

Using this template, you could build out a more complex email, like the one shown below.

See the Pen HTML Email Table Template by Christina Perricone (@hubspot) on CodePen.

Let’s take a closer look at the attributes you can define to add a border, background color, and other styling to your HTML email.

HTML Email Table Attributes

In HTML, attributes provide additional information about HTML elements. This information can be essential or non-essential, and impact the appearance, positioning, or functionality of an HTML element.

Attributes are always found in the opening tag of an HTML element and have the syntax: name="value". Attributes can be written in any order inside the opening tag.

Many attributes can be applied to multiple elements. The width attribute, for example, can be set on an image or table element. However, some attributes are unique to certain HTML elements. Tables have their own set of attributes, including:

• Role: The role attribute must be set to "presentation". The presentation role is used to remove semantic meaning from an element and its child elements. This is necessary for table elements in an HTML email because they are only used for layout purposes.
• Align: The align attribute specifies the alignment of a table according to the surrounding text. You can set this attribute to left, right or center.
• Cellspacing: The cellspacing attribute specifies space between cells. It should be set to a number in pixels.
• Cellpadding: The cellpadding attribute specifies space between the cell wall and cell content. It should be set to a number in pixels. You have two options for setting your cell padding. You can set the cellpadding attribute once for each table element. Or you can use inline CSS to set padding in individual cells. Since mixing these two methods is likely going to cause issues in email applications, it’s best avoided.

Now let’s take a closer look at some other attributes below.

HTML Email Table Border

To specify if a table has a simple black border in an HTML email, you can add the border attribute and set it to “1". To specify that it does not have a border, set the attribute to “0".

Notice in the email template above, that each table element has a border attribute set to “0".  Here’s a closer look at the syntax of that first table:

Let’s see how the email changes when the border attribute of each table is set to “1.”

See the Pen HTML Email Table Border by Christina Perricone (@hubspot) on CodePen.

HTML Email Table Background

To specify if a table has a background color in an HTML email, you can add the bgcolor attribute and set it using a color name, hex color code, or other color system in CSS.

Notice in the email template above, the background color of the header is set to a shade of blue. 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.

Here’s the basic code:

Responsive HTML Email Table

While creating an HTML email with table elements can be tricky to learn, making that email responsive is easy. You can make an HTML email responsive by setting the container div to a fixed width and setting the width of the nested tables to 100%.

Here’s a closer look at the syntax of the container div with only one table.

Creating a responsive HTML email is considered a best practice. To learn more about HTML email best practices, check out The Simple Guide to Creating an HTML Email [+ Free Templates].

Creating Emails with the HTML Table Element

Coding emails with the HTML table element will help ensure your emails display as intended, no matter what email application your subscribers use. You just need to know a bit of HTML and CSS to code responsive emails with borders, backgrounds, and other styling.

Once you’ve got the codebase of your email down, you can start turning your best and most repetitive emails into templates with HubSpot’s Free Email Templates Builder.