Table

The Table element allows you to organize and display information in a structured grid of rows and columns. Tables are useful for presenting data that is easier to understand when arranged systematically, such as pricing information, schedules, feature comparisons, product specifications, or statistics.

Tables can be fully customized, including the appearance of headers, row styling, colors, borders, and the structure of rows and columns.

Table of Contents

• Adding a Table
• Option 1
• Option 2
• Moving and Resizing Table
• Customizing a Table
• Table Setup Tab
• Style Tab
• Managing the Table
• Editing Table Text and Headers
• Deleting the Table
• More Menu
• Best Practices for Using Tables

Adding a Table

You can add a Table element to your page using one of the following methods:

Option 1

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

• Select the Table element from the modal that appears:

• Drag the Table element to the desired section and drop it onto the grid.

Option 2

• Hover over the left sidebar of the Website Builder and click Build (+) button:

• Select the Table element:

• Drag the Table element to the desired section and drop it onto the grid.

Moving and Resizing Table

Tables can be repositioned and resized just like other elements in the Website Builder. You can:

• Move the table to a different location on the page.
• Resize the table using the drag-and-drop grid.
• Adjust the layout without affecting the content inside the table.
• Duplicate the table to quickly create similar layouts.

To learn how to move, resize, and duplicate elements, please refer to the Elements Management (Drag and Drop Grid) article.

Customizing a Table

After adding a table, you can customize both its appearance and structure to better present your content. To edit, duplicate, arrange, or delete the table, click on the element and use the options available in its toolbar.

Table Setup Tab

The Table Setup tab allows you to configure the structure and organization of your table.

• Header Row: Enable this option to create a dedicated heading row at the top of the table. Header rows are typically used to identify the content of each column and improve readability.
• Header Column: Enable this option to designate the first column as a heading column. This is useful for categorizing rows and making comparisons easier.
• Number Column: Enable this option to automatically display row numbers. This can help users reference table entries more easily, especially in larger tables.
• Shade Even Rows: Enable alternating row colors to improve readability and make it easier to distinguish between adjacent rows of data.
• Shade Color: Select the color used for alternating rows. This option becomes available only when Shade Even Rows is enabled. Using subtle colors can make large tables easier to read without distracting from the content.

Style Tab

The Style tab allows you to control the visual appearance of the table.

• Header Text Color: Set the color of the text displayed in the header row.
• Header Background Color: Set the background color for the header row. Distinct header styling helps users quickly identify column labels.
• Text Color: Set the color of the text displayed in standard table cells.
• Text Background Color: Set the background color of the table cells to match your site's design and branding.
• Border: Drag the slider to increase or decrease the border thickness. Thicker borders make cell boundaries more visible, while thinner borders create a cleaner look.
• Border Width: Drag the slider to increase or decrease the width of the table columns. Wider columns can accommodate more content, while narrower columns help conserve space on the page.

Managing the Table 

You can modify the table structure at any time by adding or removing rows and columns.

• Add a Row: Select either Add a Row Above or Add a Row Below to insert a new row relative to the selected row.
• Delete a Row: Remove the selected row and all content contained within it.
• Add a Column: Select either Add a Column Left or Add a Column Right to insert a new column relative to the selected column.
• Delete a Column: Remove the selected column and all content contained within it.

Editing Table Text and Headers

You can edit both standard table cells and header cells directly within the table. Select the text you want to modify to display the editing menu.

• For a simple row:

• For a header row:

Deleting a Table

If the table is no longer needed, you can remove it from the page.

• Click the element and select the Remove button [Bin] that appears in its toolbar:

• The element will be removed immediately.

More Menu

The More menu provides additional actions for managing the table element. Click the More icon in the editing toolbar to view available options.

• Cut: Click Cut or press Ctrl + X to remove the table and place it on the clipboard so it can be pasted elsewhere.
• Copy: Click Copy or press Ctrl + C to create a copy of the table on the clipboard while keeping the original in place.
• Duplicate: Click Duplicate or press Ctrl + D to create an exact copy of the table. The duplicate appears immediately and can be edited independently from the original.
• Delete: Click Delete to permanently remove the table from the page.
• Move Forward: Click Move Forward or press Ctrl + ⇓ to bring the table one layer closer to the front when elements overlap.
• Move Backward: Click Move Backward or press Ctrl + ⇑ to send the table one layer farther back in the stacking order.

Best Practices for Using Tables

• Use tables only for structured data that benefits from row-and-column organization.
• Keep column headers concise and descriptive.
• Avoid overcrowding tables with excessive information.
• Use header rows and alternate row shading to improve readability.
• Maintain consistent formatting throughout the table.
• Choose text and background colors with sufficient contrast for accessibility.
• Use tables for comparisons, pricing, schedules, specifications, reports, and data summaries.

This helps ensure that your tables remain clear, organized, and easy for visitors to understand.