How to visualize information with tables

Learn how to convey and structure different types of information with a new Table element.

Let's say, you need to display some contact info or a schedule, to tell about tour packages, or to describe payment plans — Tables help to organize any data neatly. Flexible settings allow you to style any table with the site design in mind.

To make a table look light and airy, use the same color for the table and section background and turn off all the grid lines.

You can add an image to the section background.

You can also choose one of the ready-made section templates.

Adding a Table element

There are two ways to add a table: 

1. Add an element. To do this, mouse over the current element and click the “+” button below it.

Select Table in the list of elements.

2. Add a section. To do this, click “+” button below the previous section. If you've chosen a blank page, the “+” button will be in the screen center.

Select one of the ready-made Tables sections.

To add a row or a column, click on the gear icon and then on “+ Add column” above the table or “+ Add row” below it. When adding a new row or column, the editor duplicates the previous one.

Table cells can contain not only text, but also other elements, such as images, buttons, icons, etc.

Table style

To design the table look, click on the gear icon and then the Table style button.

Here you can select the Header settings: customize the color, font and line height of the top and left headers.

There is an option to alternate the color of odd and even rows or columns in the table header and body. It promotes easier understanding of data, and it allows you to design the table in your brand colors.

You can set up the arrangement of inner grid lines, their color and thickness, add the outside borders to the table.

Select the font size and weight, line height and padding in the cells.

Set up the way your table will be displayed on mobile devices.