(Not rated)

Already rated by you

11. Creating a table element

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

To create a table, create a new element 'Table', below the tab 'Typical page content'. (11.1.1)

In the 'General' tab you can see that the content element type 'Table' is selected (1). 
The element uses the regular header field (2), below you can set the type of a header (3), align it to the left, center or right (4). In the field (5) you can insert the link to any page of a site or to a file, or to another site or even to email. And there is also an option to add a subheader to your table (6). (11.1.2)

Below, you can see the field for table content (2), which you can add by clicking the Table wizard icon, on the right hand side of the field (1). There is also an option to select 'Field Delimiter' (3) in dropdown, which sets if the columns are separated with a pipe, semicolon, comma, colon or tab.
In the 'Text enclosure' (4) field you determine if single or double quotes is used to separate text. (11.1.3)

When the Table wizard opens, it automatically creates a number of column and rows. You can add new rows/columns, with the plus icon (1), and delete with the trash can icon (2). You can also change the order of columns/rows, with the arrows (3). (11.1.4)

When you have added your information, save and close the Table wizard, to go back to the 'General' tab - there you can see that 'Table content' contains the information, presented as plain text and separated by pipe delimiter. (11.1.5)

There are some settings that can be applied to the table to change the design. You can find them by choosing the 'Appearance' tab. At the top there is a dropdown (1) to select the layout. The appearance option (2) allows you to add background colours or inverse the colour scheme of the element text - this function depends on the design of the website. Sometimes it is necessary to create more space between elements or to add some margins - this can be added before the element (3) or after it (4). It is also possible to set an alignment for all the text in the element (5), for example to have it centered.

Below 'Table Layout' you can find a dropdown (6) where you can choose the number of columns you would like. In the next dropdown you can set a 'Table style' (7) and 'Table header position' (8) and you can use table footer by 'Enabled' checkbox (9).

Finally, you can make a link to go to a top of page (10) by clicking checkbox 'Append with Link to Top of Page' - this will add a 'To top' link at the bottom of the content element on the frontend and by clicking this link, the visitor will be sent to the top of the page automatically. If you don't want o have such a 'To top' link, leave the checkbox 'Show in Section Menus'. (11.1.6)

Below are two examples of what the tables could look like, when using the Striped layout with header in the top (11.1.7) and using the Bordered Condensed Hover layout with header in the top (11.1.8).

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'. (11.2.1).

In the 'General' tab you can see that the content element type 'Table' is selected. 
Start with copying the text in your CSV-list, and then paste it into the Table content text field. Below the field you find the 'field delimiter' dropdown. Here you can select the Field delimiter, which sets if the columns are separated with a pipe, comma, semi colon etc. (11.2.2)

To change the design and layout of a table, go to the 'Appearance' tab and use the same instructions as on the previous section.

Comments (0)

No comments yet