Applicable Packages
Lite Plus Max Shop

The table component, whose option icon is shown in figure 1, creates a table.

Figure 1. the table option icon

A table is a grid of text components, as shown in figure 2. The web browser automatically determines how wide to make the columns to best fit the text.

Figure 2. an example of a table

Editing a table

In edit mode a dotted line is shown around each cell and a table bar is displayed above the table, as shown in figure 3.

Figure 3. a table in edit mode

Rows and columns can be added and deleted by right-clicking on the cells to display a context menu. The text in the cells can be edited in the same way as text components. The shortcuts Tab and Shift Tab can be used to move forwards and backwards between cells.

The table window

Click on the table bar to open the table window, as shown in figure 4.

Figure 4. the table window, table tab

The table window has two tabs. The Table tab lets you change the following settings:

Space between cells

How much space there should be, in pixels, between table cells.

Import/export CSV

The Import… and Export buttons allow you to import and export CSV files. CSV files can be edited in spreadsheet applications. If you have data in a spreadsheet that you want to display on your site, you can export a CSV file from the spreadsheet application and then import it into the table.


Whether the table has headers and whether they are in the first row or first column. This setting affects which border layouts are available.

Border colour

The colour of the borders around table cells.

Border layout

Which borders are shown. The first five options are always available, while the final three depend on whether the table has headers.

The Breakpoints tab, shown in figure 5, lets you control the appearance of the table on narrow screens, where the table may have too many columns to fit.

Figure 5. the table window, breakpoints tab

The check-boxes let you choose breakpoints at which the table will split into a separate table for each row of data, as shown in figure 6.

Figure 6. an example of a table on a narrow screen

Note that this feature requires the table headers to be present in the first row of the table.

Click OK to apply the changes to the table. Click Cancel to return to the page without changing the table.