How to Add a Table to an Email Template

How to Add a Table to an Email Template

How to Add a Table to an Email Template

Display structured content

What's the best way to present structured content in a template?

Let's say, for instance, you're promoting a product or service and want to place a three-column price list in an email template. Or maybe you're a coach or instructor promoting a new class and want to tell students and prospects about the upcoming schedule.

Inserting a table is a good choice, but it has design limitations. Another option, which offers considerably more design flexibility, is to build an element that looks like a table (but it's not) by stacking multi-column structures. 

Let's look at each option in detail so that you can choose the best tool for your next template.  

Inserting a table

The screenshot below shows structured content in a table. Design-wise, it's pretty simple. I placed a four-column table inside a structure. After adding a header and text, I changed the background color of the structure.

tinyEmail email create a table

With a few adjustments, the mobile display looks clean. The heading spans across the table in one line, and there are no unexpected column breaks.

tinyEmail email create a table check mobile display

For a simple presentation, a table might do the job. It's easy to create and doesn't take much time to assemble, but the design options are limited. For instance, it's not possible to change the background color of individual rows or set column width.  

Adding a table

  1. Go to the canvas and select a block (e.g. a 1-column structure).
  2. Hover the structure and click the text icon. tinyEmail automatically adds a Text container.

tinyEmail email create a table add block

Next, go to the menu bar at the top of the screen and click the ellipsis. Select Table.

tinyEmail email click table icon

The Table Properties panel displays. At a minimum, you should set the number of rows and columns plus the table width. Click Ok when it looks good.

  • Later on, you might want to open the Table Properties panel and tweak the settings. Here's how. Click any table cell to display the top menu bar. Click the ellipsis and then Table in the drop-down menu.

tinyEmail email customize table settings

Add text to the cells and make adjustments to the mobile display, if required. 

That's it!

tinyEmail email compare desktop and mobile view

Building a structure

If you need a more robust range of design options, stacked containers might be a better choice. Stacked containers display well on mobile devices, but you'll need to make a few tweaks.

  • In this scenario, I create structured content for a fitness instructor promoting a class schedule.

tinyEmail email view table

Start building

Before you begin, make sure you know the number of rows and columns that need to be in the faux "table." In this example, I want four rows (including the top row for headers) and three columns. Of course, it's easy to add or remove rows or columns as you move through the process, but why make extra work?

Start by dragging a three-column structure to the canvas and tweaking the settings. Notice in the screenshot below, for instance, the canvas distributes the columns unevenly. That's an easy fix.

tinyEmail email add spacign between table columns

Click the structure one time to make it the active layer, and go to the side panel. I'll make two adjustments. 

Click the Equals (=) icon. This automatically sets each container (which we call table columns) to the same width. Then set the Indent between containers figure to zero. This eliminates the gap between containers and provides more space for text and padding. 

  • If you want to add a container (column) to the structure, now is a good time. Click the plus (+) icon under the Data heading on the side panel.