With the Table component, you can display text-based information in a table format on a page of your website. To get started, click on Add Content in the website editor, then drag the component to a page of your site. Next, click on the component to open the options panel on the left.
Tip: Unlike many page elements, tables do not change their layout on smaller screens. If you find that your table doesn’t display how you like on a mobile device, consider adding the Block component and adding your table to that. Blocks have a Visibility option which can be used to only show the table on specific screen sizes. You can even make more than one table this way, each set up to look best on different screens.
Editing Table Cell Content
To edit the content of a cell, simply click in the cell and start typing. This also applies to table headers - click in one and type. You’ll see the text editing toolbar appear so you can format your text any way you want.
Managing Table Rows and Columns
Under the Table option in the options panel are three options: Rows, Columns, and Sort by. Both Rows and Columns are numerical fields, so you can enter any number you want in each to control the number of table rows and columns.
With the Sort By option, you can quickly re-sort the table. Select a column from the dropdown menu, then click the Refresh button next to the menu. This will update the table sorted by your selection. Note that the option will currently sort alphanumerically and in ascending order.
Tip: If you don’t see updated column header names in the Sort By dropdown menu, click somewhere else in the website editor, then click on the table and open the options panel again.
Layout
Within the Layout option group are a pair of options to control aspects of the layout:
- Heading Type - This option controls which cells are styled to look like table or row headers. You can set this to either the Top Row, Left Column, or None if you’d prefer to have no table headers.
- Align - With this option you can align the content of all cells to the left, right, or center.
Design
The Style option in this option group allows you to stick with default theme styling, or customize the styling. If you choose to customize, you’ll see the following options become available:
- Cell Background - With this option you can set the background of all non-header cells in the component to a color, gradient, image, or image with overlay.
- Cell Text Color - Use this option to customize the color of text in non-header cells.
- Heading Background - With this option you can set the background of all header cells in the component to a color, gradient, image, or image with overlay.
- Heading Text Color - Similar to the above, this option allows you to control the color of text in header cells.
- Border - With this option you can add a border to the table, setting the style, color, and width.
Spacing
The Margin option found here controls the space around the table within the component. You can set this individually for each side, and set it separately for different screen sizes by clicking the desktop/mobile icon.