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.

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 Save to keep your changes or Cancel 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 Save to keep your changes or Cancel 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 Save to keep your changes or Cancel 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 Save to keep your changes or Cancel 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 Edit button 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 Edit button to keep your changes, or the Edit button to abandon changes
  • Click Save to keep your changes or Cancel 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 Save to keep your changes or Cancel 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

Follow Us

Contact Us
Facebook

Scouts Online Facebook Page
YouTube Channel

Scouts Online YouTube Channel
© 2014 www.ScoutsOnline.co.uk

Scouts Online