.

The table component, whose option icon is shown below, creates a table.

A table is a grid of text components. The web browser automatically determines how wide to make the columns to best fit the text:

Editing a table

In edit mode a dotted line is shown around each cell and a table bar is displayed above the table:

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:

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.

Headers

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 two depend on whether the table has headers.

The Breakpoints tab lets you control the appearance of the table on narrow screens, where the table may have too many columns to fit:

The check-boxes let you choose breakpoints at which the table will split into a separate table for each row of data:

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.