Editing tables

To edit tables in Weblication® CMS, you can use a convenient table editor.

By using the table editor as a structural element, you can specify the structure and layout of the table. Within this framework, an editor has access to the functions that you allow via the configuration.

You can define the table editing options via the project configuration(variable editing), which you can access via the Weblication® panel.
The editing options based on the most recent table element (Weblic®) are described below.

'Edit table cell':

By clicking in a table cell, you can edit the content of this cell. Depending on the configuration of the table properties, pure text editing (input or textarea) or text with formatting options (WYSIWYG) is available.
You specify which editor is used for the entire column via the table maintenance tag (attribute: colsEditors).

'Move table row up':

By clicking on the arrow up button , you can move the current row up by one row.

'Move table row down':

By clicking on the arrow-down button , you can move the current row down one row.

'Delete table row':

By clicking on the minus button , you can delete the current row. You will not be asked whether you want to delete it!

'Insert table row':

By clicking on the plus button , you can copy the current row and thus insert a table row.

'Format table row':

By clicking on a box on the right-hand edge of a table row, you set the formatting stored for it for the entire table row. As a rule, the corresponding box already shows the background color that has been defined for the stored class.
This selection option is only available if this is activated for the table editor (see maintenance tag reference: Maintenance of tables - attribute: changeRowClasses).
The available classes for formatting are defined via the maintenance tag attribute rowClasses or can be overlaid via CSS-only sub-variants of the BASE (Mobile First) Table Weblics®.

'Format table column':

By clicking on a box at the bottom of a table column, you set the formatting stored for it for the entire table column (except for the header of the column (th)). As a rule, the corresponding box already shows the background color that has been defined for the stored class.
This selection option is only available if this is activated for the table editor (see maintenance tag reference: Maintenance of tables - attribute: changeColClasses).
The available classes for formatting are defined via the maintenance tag attribute colClasses or can be overlaid via CSS-only sub-variants of the BASE (Mobile First) Table Weblics®.

'Width of the table column':

In this field, you can optionally specify the width of the corresponding table column.
Possible values:

• Pixel specification
  Specification in pixels (value is expected with the addition px), e.g. 150px for 150 pixel width
  
• Percentage value
  Specification in percent, e.g. 25%
  Make sure that all columns add up to 100% when specifying percentages.

This selection option is only available if this is activated for the table editor (see maintenance tag reference: Maintenance of tables - attribute: changeColWidth).

'Advanced table settings':

'Import tables':

By clicking on this button, you can optionally import a table from a spreadsheet program (e.g. Excel™). Paste the table copied to the clipboard into the open window and accept it by clicking OK.
This functionality appears depending on the setting in the configuration.
This selection option is only available if this is activated for the table editor (see maintenance tag reference: Maintenance of tables - attribute: import).

'With/without table header':

Using the selection box in the extended table settings, you can optionally select whether a table header (th element) is used or not. A table with a table header can, for example, be given a different formatting for the first table row for the th element used here.
This selection option is only available if this is activated for the table editor (see maintenance tag reference: Maintenance of tables - attribute: changeDisplayHeader).

'Format table (select display/class)':

Using the selection box in the advanced table settings, you can optionally select the display of the table (e.g. "Standard display" or "Without border"). The stored CSS class determines the appearance of the table in the page output. You can influence this formatting (e.g. table.default) via the CSS file of the project (usually design.css).
This selection option is only available to you if this is activated for the table editor (see maintenance tag reference: Maintenance of tables - attribute: changeClasses).
The available classes for formatting are defined via the maintenance tag attribute classes. In BASE, this is implemented in such a way that the available display types are defined via the project configuration.

'Columns (number of table columns)':

You can use this selection box to optionally define the number of columns in the table. The possible values of the selection box can be defined via the configuration setting of the table.
This selection option is only available if this is activated for the table editor (see maintenance tag reference: Maintenance of tables - attribute: changeNumberCols).
The available values are defined via the maintenance tag attribute colClasses.

'Linked columns':

You can use this selection box to optionally connect existing table cells in a row. The values of the selection box define the possible cells to be linked. Starting from and including the current cell, the number of subsequent cells in the row is connected.
In a four-column table where a cell is clicked in the second column, a maximum value of three is therefore specified. The selection of three would then connect the cells in columns two, three and four in the row.

'Appearance':

Use this selection box to specify the CSS-only display variant for the table.

'Editors for columns':

In this field, you can optionally specify the editors to be used per column. The values for the columns are specified from left to right and separated by the pipe character |.
Possible values:

• input
  single-line input field for text (without formatting)
• textarea
  Multi-line input field for text (without formatting)
• wysiwyg
  multi-line input field for formatable text (WYSIWYG functions can be restricted (e.g. wysiwyg(bold, italic) for bold and italics)
• picture
  Image maintenance tag

Example of a three-column table:
input|wysiwyg(bold, italic, underline, left)|wysiwyg
(first column: Input field, second column: WYSIWYG with limited functionality, third column: WYSIWYG with all functions)
All possible WYSIWYG functions can be found in the developer area.
This selection option is only available to you as an administrator by default and is set via the corresponding maintenance tag attribute (see maintenance tag reference: Maintenance of tables - attribute: colsEditors).
A change to the editor to be used for each column becomes effective after updating the edit screen.

'Do not use editors in the header':

If this parameter is activated, the previously set editors are not applied to the header. The cells in the header row therefore use normal input fields.

'Minimum number of columns':

You can use this selection box to optionally set the minimum number of columns in the table. The possible values of the selection box can be defined via the configuration setting of the table in the table element.
This selection option is only available to you as an administrator by default and is set via the corresponding maintenance tag attribute (see Maintenance tag reference: Maintaining tables - Attribute: colsMin).

'Maximum number of columns':

You can use this selection box to optionally specify the maximum number of columns in the table. The possible values of the selection box can be defined via the configuration setting of the table in the table element.
This selection option is only available to you as an administrator by default and is set via the corresponding maintenance tag attribute (see Maintenance tag reference: Maintaining tables - Attribute: colsMax).

'Minimum number of rows':

You can use this selection box to optionally specify the minimum number of rows in the table. The possible values of the selection box can be defined via the configuration setting of the table in the table element.
This selection option is only available to you as an administrator by default and is set via the corresponding maintenance tag attribute (see Maintenance tag reference: Maintaining tables - Attribute: rowsMin).

'Allow sorting by user':

If this parameter is activated, page visitors are provided with a sorting option for each column in the table header.

'Display on small screens':

This selection box can be used to optionally select a different display of the table for smaller screens ("Values next to labels").

'Mark first column as header column':

If this parameter is activated, the first column of the table is marked as a header column (th) and can be formatted accordingly using CSS.