Supercharge Your HTML Email Design With Tables [+ Templates to Get You Started]

Written by: Jessica Rose
Person sitting at a desk, working on a computer with multiple screens displaying coding templates, with the text promoting 50 free coding templates for HTML, CSS, and JavaScript.

FREE HTML & CSS CODING TEMPLATES

Dozens of free coding templates you can start using right now

Download for Free
woman uses html email table at work

Updated:

Published:

Early in my career, my boss asked me to put together my first marketing email. As an overly confident dev, I thought it would be easy. I could make websites. Surely an HTML email would be easier and quicker. Awash with hubris, I left the task for Friday afternoon. It ended up ruining my Friday night. I should have used an HTML email table.

If you’re just getting started with building emails using HTML, I have some hard news: Developing emails and websites can feel very different. Most modern web browsers will display HTML and CSS in the same way. However, email applications have their own rendering engines, leading to different applications to display the same code in different ways.

Download Now: 50 Code Templates [Free Snippets]

But, don’t despair! I’m going to explain how HTML email tables became my favorite cheat code to make sure everything ends up in just the right place. Let’s get started.

Table of Contents

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. Think of the table elements as the floorplan of your HTML email.

Just in case the email you’re working on is the last thing between you and your weekend, I’ve included a very basic HTML email table template below to get you started.

Notice there is a div with the id “email". A div element creates a container that you can apply styling rules to or use to better divide up your email. This div contains three tables, each representing the header, body, and footer of the email. These make up the essential building blocks of an HTML email.

If you’ve used HTML on the web before, these sections should feel familiar. They’re going to act in the same way that a header, body, and footer of a webpage would. Using this template as a starting point, you could build out a more complex email, like the one shown below.

While this HTML table template might be enough to get you started, I want to slow down and look at the different attributes that make up an HTML email. You can then build more from the floorplan our tables provide.

HTML Email Table Attributes

If our HTML tables provide the structure of our email, I like to think of HTML attributes as a way to provide additional information about HTML elements. This information can 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. Here’s a handy reference for all the different attributes you might use in HTML.

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 removes 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: This will set the alignment of your table relative to the text surrounding it. You can set this attribute to left, right, or center.
  • Cellspacing: The cellspacing attribute specifies the distance between cells of your table. It should be set to a number in pixels.
  • Cellpadding: The cellpadding attribute specifies the 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. I recommend sticking to setting your cellpadding to apply to each table in your email or setting it for each cell. Mixing these can cause issues for different email applications.

50 Free Coding Templates

Free code snippet templates for HTML, CSS, and JavaScript -- Plus access to GitHub.

  • Navigation Menus & Breadcrumbs Templates
  • Button Transition Templates
  • CSS Effects Templates
  • And more!

    Download Free

    All fields are required.

    You're all set!

    Click this link to access this resource at any time.

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

    HTML Email Table Border

    The border attribute lets you draw a border around your table. 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”. Skipping a border attribute will result in a borderless table. You can also 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:

    I suggest experimenting with the border attribute to better understand how it works. For example, see how the email changes when the border attribute of each table is set to “1.”

    HTML Email Table Background

    Tables and borders are great for positioning your email but can result in an email that looks like plain boxes stacked together. What if you want something a little flashier? The table background attribute allows you to add a splash of color. To specify if a table has a background color in an HTML email, you can add the bgcolor attribute. Set it to any color name, hex color code, or other color system in CSS.

    I’ll call your attention back to the email template above. See how 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 the CSS color you like best, like #00A4BD.

    Here’s the basic code:

    Responsive HTML Email Table

    Responsive design means that users accessing your content can enjoy it on screens of different sizes. Remember, people will open your email on laptops, mobile devices, and tablets.

    I know that we’ve already learned a lot about creating HTML emails using tables. The good news is that making those emails 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.

    While the width of the div you want to display might change, the syntax creates a set width for the parent div and all your child tables. This quick trick for responsive HTML tables for email will always resize your tables around your reader’s device.

    Creating a responsive HTML email is considered a best practice. Learn more about HTML email best practices.

    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.

    If you get stuck (or if you’re in a hurry to get out of the office and on with your weekend) you can start structuring your email by copying over any of the examples in this tutorial and tweaking them to make them your own. If you want even more help getting started, HubSpot offers a Free Email Templates Builder to make sure you always start your weekends on time.

    Editor's note: This post was originally published in June 2021 and has been updated for comprehensiveness.

    50 Free Coding Templates

    Free code snippet templates for HTML, CSS, and JavaScript -- Plus access to GitHub.

    • Navigation Menus & Breadcrumbs Templates
    • Button Transition Templates
    • CSS Effects Templates
    • And more!

      Download Free

      All fields are required.

      You're all set!

      Click this link to access this resource at any time.

      Topics: HTML

      Related Articles

      Dozens of free coding templates you can start using right now

        CMS Hub is flexible for marketers, powerful for developers, and gives customers a personalized, secure experience

        START FREE OR GET A DEMO