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 a message. Or maybe you're an instructor promoting a class and want to tell students 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 message.
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.
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.
Adding a table
Go to the canvas and select a block (e.g. a 1-column structure).
Hover the structure and click the text icon. tinyAlbert automatically adds a Text container.
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.
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.
Add text to the cells and make adjustments to the mobile display, if required.
That's it!
Building a structure
If you need more 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.
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.
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.
Now, I'm going to add text to the first row of the table. Select one cell inside the structure and click the Text icon. Enter text. In this example, I enter Beginner. Repeat steps for other cells.
Next, highlight the text in a cell. Go to the top menu bar and select H2 format and center alignment. (You could also choose H1 or H3). Repeat for the other cells.
Formatting text as H2 is a simple step that saves time later when you're adjusting font size for optimal desktop and mobile displays.
Next, go to the side panel and customize text settings. Click Appearance and then the Headings tab. Here, you can customize the font and line spacing. Go to Heading H2 and adjust the font size (and color, that's optional).
Because you applied the H2 format to all table text (see above), any H2 change you make here applies to all text.
Preview the work thus far. In the screenshot below, the desktop layout looks solid, but the mobile display is not right. The responsive display stacks the containers vertically, but I want to preserve the table's horizontal format. That's an easy fix (see below).
Mobile display
The above screenshot shows the mobile display with stacked containers. In many circumstances, that is a preferred outcome, but not with a table. To fix this problem, disable mobile responsiveness.
Click the structure one time to make it the active layer. Scroll down the side panel to the Responsive structure toggle. Switch off the toggle.
The result is a line of text that looks like a table row. Further down the page, I show you how to adjust mobile-only formatting to optimize table display on mobile devices.
Adding rows
Based on the Preview, our desktop layout looks good. Let's add rows and finish the table by duplicating the structure.
Click the structure one time to make it the active layer. Open the toolbar and click the Copy icon. Make enough copies to complete the table (rows plus header). When you've inserted enough rows, replace the duplicated text with the correct content
Give your table a bit of style (and improve readability) by customizing the background color of alternating rows. That's optional. Highlight a structure and then customize the color on the side panel. Repeat for other structures.
The screenshot below shows our table display on a desktop screen. Now, let's fix the mobile display.
Mobile display
Tweaking the font size for an optimal mobile display is the last big step. Go to the side panel, click Appearance, and then the Mobile Formatting tab.
Scroll down to the H2 heading and adjust the font size. Open the Preview panel and inspect the Mobile layout. You may have to move back and forth a few times to get a polished result.
Wrap up
The final result is table-structured content that looks good on desktop and mobile devices.
