The table element lets you quickly visualize data. It's an excellent tool for engagingly presenting your data. This article shows you how to add the element to your page and manage its settings.
💡 Want to learn other ways to visualize your data? Read our article Working with the data elements.
In this article
🎥 Click here to watch our video lesson on how to help your reader easily scan and understand data.
How to add the table element
You can find the table element in the elements tab on the left-hand side of your screen. Drag the element into a column on your page.
💡When you're working with the Content Builder, it's not possible to add a table element to your page. They're included in block templates in the Content - Data section.
Once you've dropped the element, you'll be prompted with a pop-up that asks you to select the number of rows and columns.
⚠️ Every table has a table header. This is the first row of the table with a contrasting color. The table header is included as one row in your selection. After adding the table to your page, you can style the table header in the element settings.
By default, the table cells will be filled with "info" as a placeholder. You're now ready to populate the table with your data — whether that's numbers or text. Click on a table cell to insert data.
Change the number of rows and columns
To change the number of rows and columns, open the element settings and click on general settings. You can change your selection there.
💡 The maximum number of rows is 25. The maximum number of columns is 8.
Style your table
-
Table settings
In the table section of the element settings, you'll find different settings that let you style your table:
-
Table color — Set the color for the table cells. This does not include the table header.
-
Header color — Set the color for the table header.
-
Header position — Decide on the position of your table header. You can choose top, top-left, left, and bottom.
-
Style alternates — Style alternating rows or columns with a different color.
-
💡 If you want full control over a table and more editing options – such as customizing the height and width of each cell – you may consider adding your own table with the embed element.
-
Brand settings
You can set the default font for the table header and table cell in the brand settings. If you click on table header or table cell, the font selection bar will let you change the font.
Your font selection in the brand settings will be the default font when you add a new table in your Doc.
Other element settings
💡 When you're working with the Content Builder, you won't see these styling element settings.
-
Border
The border option allows you to create a complete border or a border on specific sides of your element. All sides at once is selected by default, meaning that when you increase the border thickness, the same amount of border will appear on all sides simultaneously.
When all sides at once is deselected, the option to increase the amount of the border for each side will appear. It is also possible to add more than one border. Every border will have the same color selected at the border color picker.
-
Spacing
Spacing can be increased to create more space between the element's border and the content within the element.
-
Animation
You can select the entrance animation of the element in the drop-down menu. This animation will show once when the page is opened.
Related articles