A table is a data structure that organizes information into rows and columns. It is commonly used for representing scheduling or contact information on the site.

Adding a table

To set up a table on your site, open the editor and add wireframe-series-7-contacts or wireframe-series-1-schedule block from the gallery:

Adding rows to the table

Hover over to the row in the table and click on + Row in the bottom right corner to add a new one below:

Click on the three dots in the top right corner of the row to delete or duplicate it:

You can also move the row within the table by holding this icon and dragging it to the desired position:

Changing the table layout

Hover over to the table and click on the "gear" to access the Table settings:

Navigate to the Layout tab to change the number of columns in your table:

Note: the maximum number of columns is eight.

By default, the width of the columns in the table is equal for each of them. To set a specific column width, toggle the Equal column width option:

Then, hover the cursor between two columns in the editor and start dragging it to adjust the width of each column:

Important: the resize changes the width of the column to the left of the cursor.

In the Layout tab of the settings you can change the Border color of your table:

You can also adjust the paddings and content alignment there, or choose the Style options in the drop-down:

Adding a header background

For that, navigate to the Header tab in the Table settings:

Set up the color background for the header in your table:

Adding the rows background

For that, navigate to the Rows tab in the Table settings:

There you can choose the presets — the basic coloring algorithm for your rows, and change the default colors. This is how your table can look like with the Color Gradation preset, which automatically generates color of each item:

Important: there is no way to set an individual color for each row in the table yet.

Don't forget to publish your site once you have done customizing your table.

Tip: check the article Changing the design of a block to set up the background or the animation for the whole block.
Was this article helpful?
Thank you!