Use tables to create a two-column home page
A table is a perfect format for some types of data, including statistical information. It can also be used to create multi-column layouts on the Home page without using HTML code or requiring advanced knowledge of web page layout. This page will describe how to create a two-column page with embedded images, descriptive text, and Lists of recently updated content on a Collaborate site.
Creating a table
To create a table, select
Table
:
The
Table Properties
screen opens:
This screen is used to configure options that define table size, display properties, and other advanced properties. The
Advanced
properties tab will not be used to create this layout.Table properties
These are the settings that can be configured in the
Table Properties
tab:- Rows- This is the number of rows in the table
- Columns- This is the number of columns in the table
- Width- This is the width of the table in pixels or a per cent value. Giving the width as a per cent value lets the user set the proportion of the editing area that the table will occupy
- Height- This is the height of the table in pixels
- Headers- This is the drop-down list that formats certain table cells as headers, which applies special formatting to them. Header formatting can be applied to the First Row, First Column or Both.
- Border size- This is the thickness of the table border in pixels. For no visible border, enter 0
- Alignment- This is the alignment of the table on the page. The following options are available: Left, Center, Right. For this demonstration, the table will be set to Center to visually centre the layout within the Home page
- Cell spacing- This is the space between individual cells as well as cells and table borders, in pixels
- Cell padding- This is the space between the cell border and its contents, in pixels
- Caption- This is the label of the table that is displayed on top of it
- Summary- This is the summary of the table contents that is available for assistive devices like screen readers. It is a good practice to provide tables with meaningful summary text to make it more accessible to users with disabilities
After making any changes, select
OK
to create a new table or update an existing table.These settings can be changed any time after the table is created, so it is not necessary to set every option when the table is first created.
Adding content
After the table is created, the user will see a blank table in the rich text editor.
Cell content can be text, images, or lists of content that is generated dynamically from their Collaborate site.
For more information about adding images and other content, please review the Rich text editor guide.
Using cells to configure columns
Column widths can set by editing the individual cells that make up the column. Each cell can also have its own background colour. For this demonstration, you will edit the right column cells to create a sidebar populated with dynamic lists.
Editing cells
The table context menu lets users edit table cells. If the user hovers the mouse over the
Cell
menu option while the cursor is in the target cell, additional options become available:
Select
Cell Properties
to display the Cell properties
screen:
Top right column cell
The top cell in this demonstration is a white cell with one image placed in it. The cell properties with important settings are mentioned below.
- Width- The width should be set to 300 pixels, although it could be set as a percentage of the table width, by changing the next field to percentage
- Horizontal Alignment- Set to Left to left-justify content
- Vertical Alignment- Set to Top to keep content aligned to the top of the cell
- Background Color- Left blank or set to #fffff to keep the background colour of the cell white. You can also selectChooseto use the colour picker to visually select a colour.
Select
OK
when you are finished and then add an image to the cell:
Next right column cells
The next cell down the right column will contain a list of site content against a colour-tinted background. First, you should set the cell properties. Because this cell should match the dimensions and formatting of the top cell, all properties should be the same except for the background colour.
In this case, enter RGB(237, 241, 242) as the value for the background colour. You can also click
Choose
to use the colour picker to visually select a colour. Select OK
when you finish and the editor preview will reflect the changes:
Adding collaborate lists
The Lists feature of the rich text editor can be used to embed dynamic lists of site content into table cells. This can be used, for example, to create a left column of dynamically updated lists of recent activity, updated files and wiki pages, tasks, and upcoming events.
Select the bottom left cell with the tinted background to place the cursor. In the rich text editor, select
List
:
The
Insert list
screen opens:
Each type of available content can be embedded and configured differently.
For a complete description of all
List
options, please read the guide to using Lists to embed site content.Other table options
Many other settings and configurations can be used with tables to create layouts. Below are some commonly used tools to create and edit table layouts:
Editing table rows
The table context menu lets users edit table rows. If you hover your mouse over the
Row
menu option, further options become available:
Below is an overview of all
Row
context menu option elements:- Insert Row Before- This inserts a new row before the one that contains the cursor
- Insert Row After- This inserts a new row after the one that contains the cursor
- Delete Rows- This deletes the row that contains the cursor
Editing table columns
The table context menu lets users edit table columns. If you hover your mouse over the
Column
menu option, further options become available:
Below is an overview of all
Column
context menu option elements:- Insert Column Before- This inserts a new column before the one that contains the cursor.
- Insert Column After- This inserts a new column after the one that contains the cursor
- Delete Columns- This deletes the column that contains the cursor
note
The rich text editor makes it possible to select multiple table cells by dragging the mouse over them, so an operation like deletion may be applied to many table columns at once.
Putting it all together
By combining images, formatted text, customised cells, and
Lists
you can create visually pleasing and useful Home
pages for other site users.