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.
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.
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.
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.
Next, go to the menu bar at the top of the screen and click the ellipsis. Select Table.
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.
Add text to the cells and make adjustments to the mobile display, if required.
That's it!
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.
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.
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.