Table

Note: This article applies to Free Trial accounts created on or after 16 December 2024 and Website, Website+Marketing and eCommerce packages created on or after 18 December 2024. If your accounts were created before these dates, please refer to the article Elements Management.

Adding a Table

Option 1

  • Hover over the desired section, and click the Add Element:

  • Choose the Table element from the modal that appears:

  • After you choose the element from the list, drag it to the desired section and drop it using the grid.

Option 2

  • Hover over the left sidebar of the Site Editor and click Build (+) button:

  • Choose the element:

  • After you choose the element from the list, drag it to the desired section and drop it using the grid.

Moving and Resizing Table

Please refer to the Elements Management (New Grid) article to learn more about moving and duplicating elements.

Customizing Table

To edit, duplicate, or delete the element, click on it and switch between the buttons that appear in its toolbar:

Editing Table

Click the table to display the Edit button to be able to modify the table's Layout and Design:

Layout Tab

  • Heading Row. Turn on the toggle to enable the heading row for the Table.
  • Heading Column. Turn on the toggle to enable the heading column for the Table.
  • Numbering Column. Turn on the toggle to enable the numbering column for the Table.
  • Highlight Even Rows. Turn on the toggle to enable the design for even rows for the Table.
  • Highlight Color. Allows to set the color for even rows for the Table (the option is active when Highlight Even Rows enabled).

Design Tab

  • Heading. Set a color for text in the heading.
  • Background (Heading). Set a color for the heading background.
  • Text. Set a text color of the Table.
  • Background. Set a background color of the Table.
  • Border. Drag to increase or decrease the thickness of the border.
  • Padding. Drag to increase or decrease padding for the Table rows.

Managing the Table 

  • Add a row: select between Add a row above and Add a row below.
  • Delete a row.
  • Add a column: select between Add a column left and Add a column right.
  • Delete a column.

Customizing Text or Heading

Select a text to display the Editing Menu:

  • For a simple row:

  • For a header row:

Duplicating the Table

  • To duplicate the table, click on the element and choose the Duplicate button that appears in its toolbar:

  • The duplicate of the element will appear immediately.

Deleting the Table

  • To delete the table, click on the element and choose the Remove button [Bin] that appears in its toolbar:

  • The element will be removed immediately.