16. Creating a table element

There are two ways of creating a table: Either by creating the table directly in the table elements Table wizard, or by using a CSV-list created from an Excel document.

16.1 Creating a table with Table wizard

To create a table using table wizard, create a new element on the page where you wish to have the table. Select "Table", below the tab "Typical page content". (img 16.1.1)

After selecting the Table element, please save the element before continuing. 

Go to the tab "Table" and click the Table wizard icon, on the right hand side of the Text field. (img 16.1.2)

When the Table wizard opens, it automatically creates a number of column and rows. You can add new rows/columns, with the plus icon, and delete with the trash can icon. You can also change the order of columns/rows, with the arrows. When you have added your information, Save and close the Table wizard, to go back to the Table element (img 16.1.3).

There are some settings that can be applied to the table, to change the design. At the top there is a dropdown (1) to select the number of columns you would like (this is set before using the Table wizard). The Text field (2) contains the table information, presented as plain text. Below the Plugin options, and the tab "Accessibility", you can set if there should be a table header (3) and if the table should have a design/layout (4) applied to it (img 16.1.4).

Below are two examples of what the tables could look like, when using the Striped layout with header in the top (img 16.1.5) and using the Hover layout with header in the top (img 16.1.6).

16.2 Creating a table using CSV-list

If you have created the table in Excel (or similar software), you can save the document as a CSV-list. By opening the CSV-file with a plain text software (for example Notepad or TextEdit), from there you can copy the table information and then use it in the table element, to create your table.

To create a table using information from a CSV-list, create a new element on the page where you wish to have the table. Select "Table", below the tab "Typical page content". (img 16.2.1).

Start with copying the text in your CSV-list, and then paste it into the Text field (1). Continue to the Plugin options and the tab "CSV parsing". Here you can select how the text should be separated with the Text delimiter (2), if the CSV-file is using single or double quote, and also the Field delimiter (3), which sets if the columns are separated with a pipe, comma, semi colon etc. (img 16.2.2)

After applying the text and field delimiters, you can choose the layout for the table below the Plugin options, and the tab "Accessibility". Set if there should be a table header (3) and if the table should have a design/layout (4) applied to it (img 16.2.3). For layout examples, please see previous section.