EndPreviousNextEnd EndPrint This TopicEnd

Working with Tables

Content / Editor

 

Working with tables can help you control the layout of text and images in a manageable structure.

 

To manage tables in the content editor - double left click to open the page or right click and select [Open].

Open page

Click [Edit Content].

Open editor

In the Editor, you can:

Create a table using the Table Builder

Create a table using the Table Wizard

Manage table properties

Manage cell properties

Manage accessibility

 


Create a table using the Table Builder

1.Click [Insert Table].

Click Insert Table

2.Run your mouse over the grid and left click when you have highlighted the correct number of rows/columns.

Table Builder - Highlight rows/columns

3.Add content to your table.

Add content to your table

4.To set the table width/height - highlight/select the table and set the width/height fields in the toolbar (in pixels or as a percentage).

Set table width

5.To set specific cell widths/heights - place your cursor in the cell and set the width/height in the toolbar (in pixels or as a percentage).

Set table cell width

TIP: See Manage Table Properties to find out more about adding table styles.

 

6.When the table is complete, click [OK] to close the content editor. Then [Save] or [Publish] your changes.

 


Create a table using the Table Wizard

1.Click [Insert Table].

Click Insert Table

2.Click [Table Wizard].

Table Wizard

3.In the Table Wizard pop up:

a.Use the [+] and [-] buttons in the Columns and Rows fields to build your table

b.Use the [+] and [-] buttons in the Column Span and Row Span fields to merge table cells

c.Click [OK] to insert the table in the content editor

Create table using Table Wizard

4.Add content to your table.

Add content to your table

5.To set the table width/height - highlight/select the table and set the width/height fields in the toolbar (in pixels or as a percentage).

Set table width

6.To set specific cell widths/heights - place your cursor in the cell and set the width/height in the toolbar (in pixels or as a percentage).

Set table cell width

TIP: See Manage Table Properties to find out more about adding table styles.

 

7.To add more rows/columns:

a.Right click over the table

b.Select the table and use options in the toolbar

c.Open the table properties

Add rows/columns

8.When the table is complete, click [OK] to close the content editor. Then [Save] or [Publish] your changes.

 


Manage table properties

1.Select the table to access the table properties.

Manage table properties

2.Update the properties as needed and click [OK].

Manage table properties

Height & Width

Sent the height and width in pixels.

Cell Spacing

Set the cell spacing in pixels.

Cell spacing increases or decreases the space between the cell borders.

Cell Padding

Set the cell padding in pixels.

Cell padding increases or decreases the space between the content and the border of the cell.

Alignment

Set the table alignment (i.e. Left, Right or Centre).
Select X to remove alignment.

Background Colour

Add a background colour to your table.

Style Builder

The Style Builder provides options to define cascading style sheet (CSS) style attributes. A CSS style combines individual formatting and positioning attributes that you can apply all at one time.

 

Open the style builder to define style attributes for the table font, background, text, layout, edges, border and lists.
Table Style Builder Dialogue

CSS Class

Select a table CSS class and style from the drop down (if available).
Please contact your web design company for more information.

Back Image

Add a background image to your table.

Id

Setting an ID for a table provides options for advanced table handling.
Please contact your web design company for more information.

CSS Class Layout

Select a predefined table CSS class layout from the dropdown to add a table style (if available).

Apply special formats to

Toggle fields to apply the selected CSS class layout to table rows and columns.

The Preview pane is updated as each tickbox are enabled/disabled.

3.To add more rows/columns:

a.Right click over the table

b.Select the table and use options in the toolbar

c.Open the table properties

Add rows/columns

4.Click [Save] or [Publish].

Button_SavePublish

 


Manage cell properties

5.Click in any cell to access the cell properties.

Access cell properties

6.Update the properties as needed and click [OK].

Manage cell properties

Height & Width

Sent the height and width in pixels.

Content Alignment

Set the alignment of content in the selected table cell.

Select X to remove alignment.

Background Colour

Add a background colour to your cell.

Style Builder

The Style Builder provides options to define cascading style sheet (CSS) style attributes. A CSS style combines individual formatting and positioning attributes that you can apply all at one time.

 

Open the style builder to define style attributes for the cell font, background, text, layout, edges, border and lists.
Table Style Builder Dialogue

CSS Class

Select a cell CSS class and style from the drop down (if available).
Please contact your web design company for more information.

Back Image

Add a background image to your cell.

Id

Setting an ID for a table provides options for advanced table handling.
Please contact your web design company for more information.

no text wrapping

Check box to stop text wrapping.

7.Click [Save] or [Publish].

Button_SavePublish

 


Manage accessibility

To generate content that can be interpreted by the Accessibility Tools integrated in Microsoft Windows (the Narrator, the Magnifier, and the On-Screen Keyboard), the Content Editor includes additional fields in the Table Properties dialogue.

 

The narrative software uses the information from the Accessibility table fields (heading rows, columns, caption alignment and summary) to produce a Tooltip message for each table cell. Users with impaired vision can see those Tooltips as they hover over the cells with the mouse.

 

You can create a "Section 508"-compliant table with the Table Wizard. Alternatively, you can convert an existing table to a "Section 508"-compliant table using the Table Properties menu.

 

1.Open the Accessibility tab, complete all fields and enable 'Associate cells with headers' tickbox.

Accessibility tab

NOTES: (i) The Caption should specify the title of the table. (ii) The Summary is used to give more details on the contents of the table. This attribute only needs to be completed if user sets 5 for the Heading rows or Heading columns field. (iii) Always select the [Associate cells with headers] checkbox.

2.Click OK to create a "Section 508"-compliant table.

Topic Link