The table component, whose option icon is shown in figure 1, creates a table.
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.
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.
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.
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.
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.
The colour of the borders around table cells.
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.
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.
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.