Table Module Documentation

Introduction

Group Package 1 websites contain a mix of default verbiage and imagery, with your group's details. This is managed for you by Scouts Online. There is no ability change the settings.

If you'd like to upgrade to a higher package level, please contact us.

The table module allows the display of information in columns. It can also be used to create an Expandable List.

Up to 10 columns and 50 rows of rich text and HTML may be displayed. The Display Style and Row Style of the table may be set to fit in with your other page content.

Use Cases

The following panels show specific tasks. Click on a panel to see the procedures.

Setup a Basic Table

Create a table to display two columns of information.

Create a table to display two columns of information.

To do this, follow these steps:

Click the settings below the module and override the default settings (see here) or add a module to your own pages, using the Page Designer
Set Display Style to 'Classic Header Bar'
Set the Row Style to 'Alternate Grey Rows'
Set the Table cells as follows:
- Add a title to the Col Header fields for Column 1
- Set the Col Width to a percentage of the full width. E.g. 30% in Fig. 2
- Add text for each row for Column 1
- Add a title to the Col Header fields for Column 1
- Set the Col Width to a percentage of the full width. E.g. 30% in Fig. 1
- Add text for each row for Column 2
Set the Animation Fields as required
Click to keep your changes or to abandon your changes

NB. If you make a mistake, you may reverse the change in the Admin/Admin Audit Trail

Fig. 1: Two column table

Fig. 2: Settings fields

Change the Styling of a Table

Change the Display Style and Row Style of a table to compliment you other page content.

You can change the Display Style and Row Style of a table to compliment you other page content.

To do this, follow these steps:

Click the settings below the module and override the default settings (see here) or add a module to your own pages, using the Page Designer
Change the Display Style
Change the Row Style
Click to keep your changes or to abandon your changes
Change the styles again until you're happy with the appearance

Fig. 1: Style field options

Set Column Widths

Add and set the widths of columns.

The table module can have up to 10 columns of information. To ensure that the information displays well, you can set the width of each column.

To do this, follow these steps:

Click the settings below the module and override the default settings (see here) or add a module to your own pages, using the Page Designer
Add Col Header and row information for each column
Set the Col Width for each column to a percentage, with all columns adding up to 100%. See Fig. 2
Click to keep your changes or to abandon your changes

NB. If you make a mistake, you may reverse the change in the Admin/Admin Audit Trail

Fig. 1: Hall Bookings

Fig. 2: Multiple columns with different column widths

Limit the Table Height

To ensure other content on your page can be seen, you may want to set a maximum table height.

To ensure other content on your page can be seen, you may want to set a maximum table height.

To do this, follow these steps:

Click the settings below the module and override the default settings (see here) or add a module to your own pages, using the Page Designer
Set the Max. Height field to the maximum number of pixels to display, with a "px" suffix. E.g. 200px - See Fig. 2
Click to keep your changes or to abandon your changes
You will see that the table shown in Fig. 1 now has a vertical scroll bar, to allow all rows to be viewed.
Adjust the Max. Height until you are happy

Fig. 1: Table with the Max. Height set.
Use the scrollbar to see more.

Fig. 2: Settings fields with the Max. Height set

Add Rich Text to Table Cells

Style the text with different fonts, colours, hyperlinks and HTML, with the rich-text editor.

Set the style of your table cells with different fonts, colours, hyperlinks and HTML, with the rich-text editor.

To do this, follow these steps:

Click the settings below the module and override the default settings (see here) or add a module to your own pages, using the Page Designer
Click the to the right of a table cell
This will open a rich-text editor. See Fig. 1
See how to use the editor here.
Click the to keep your changes, or the to abandon changes
Click to keep your changes or to abandon your changes

NB. If you make a mistake, you may reverse the change in the Admin/Admin Audit Trail

Fig. 1: Rich-text editor

Setup a Expandable List

Use the table module to display an accordion or expandable list, with a header and text/HTML for each row.

Use the table module to display an expandable list, with a header and text/HTML for each row

To do this, follow these steps:

Click the settings below the module and override the default settings (see here) or add a module to your own pages, using the Page Designer
Set the Display Style to 'Expandable List'
Set the Row Style to 'Plain
Add each section's title text/HTML to the rows in Column 1
Add each section's body text/HTML to the rows in Column 2
Click to keep your changes or to abandon your changes

NB. If you make a mistake, you may reverse the change in the Admin/Admin Audit Trail

Fig. 1: Expandable list with the first block expanded

Fig. 2: Expandable list setting fields

Scouts Online Facebook Page

Scouts Online YouTube Channel

Table Module Documentation

Introduction

Follow Us

Scouts Online