More topics

Work with tables in CMS Lite

Last updated on January 9, 2024

Make tables accessible

To create responsive design and meet web accessibility standards: 

  • Only use tables to display tabular data. Do not use tables to create page layout. For example: Do not use a table to add more columns to a page
  • Use the Caption and Summary fields to provide context for the visually impaired 
  • Only use the recommended background colour on this page when applying shading to table cells

Copying tables from Word

If copying tables from another application, such as Word, make sure to modify the table properties to comply with the B.C. government web standards.

  • Width = xxx%
  • Cell Spacing = 0
  • Border Size = 1
  • Cell Padding = 4

Sample table

This is an example of a table with sort and search features:

Colours in English and French
Colour name (English) Colour name (French)
red rouge
orange

orange
yellow

jaune
green

vert
blue bleu
purple violet
black noir
white blanc
brown brun

Tutorial video

Watch a tutorial video to help you understand how to create and adjust tables in CMS Lite.

Expand All | Collapse All
 

Work with tables in CMS Lite

Step-by-step instructions for B.C. government content editors on how to create and modify tables using the CMS Lite application.

Work with tables in CMS Lite

 

Inserting and configuring a table

Steps to insert a table

  1. Place the cursor in the Body: where the table is to be inserted
     
  2. Select the table table icon icon from the toolbar
    The Table Properties will be displayed

Setting table properties

Table Properties box

  1. Complete the fields: 
  • Rows:
    • Enter the number of rows
  • Width:
    • Defaults to 100%. The table will encompass the entire width of the content well no matter what type of device is used to display the page. 
    • If desired, enter a new percent value. Ensure the % sign is used, or the table width will default to pixels.
  • Columns:
    • Enter the number of columns
  • Height:
    • Leave blank
  • Headers:
    • For screen reader accessibility, tables must have a Header.
    • Defaults to First row. Choose from the drop-down to choose First row, or First row & column.
    • Do NOT merge cells that are defined as headers as it will result in multiple columns or rows associated with one header label, making them inaccessible to visually impaired people using screen readers
  • Cell spacing:
    • Leave default set to 0 (zero)
  • Border size:
    • Leave default set to 1
  • Cell padding:
    • Leave default set to 4
  • Alignment:
    • Default is <not set>
    • If you have entered a width of less than 100%, you may use the drop-down menu to align the table Left, Centre or Right
  • Table Style:
    • Default is <not set>
    • Use the drop-down and select Striped to add background shading to every other row starting with the Heade
  • Enable Sort and Search:
    • Recommended for complex tables with many rows of data.
    • Inserts the following functionality:
      • Show 10, 25 or 50 rows per page
      • Provides a search box
      • Column headings (first row) can be sorted in ascending or descending order 
         
  • Enable Pagination Elements:
    • Pagination buttons are inserted at the bottom of the table
       
  • Caption:
    • If desired, add a caption that will appear above the table which will display in the web browser
       
  • Summary:
    • The summary does not display in the web browser, but will form part of the Page Source metadata information. More importantly, it will be read out by a screen reader for the visually impaired

 

  1. Click the [OK] button to complete the action
    The Table Properties will be closed and the table will be inserted at the cursor location

Troubleshooting: Table does not display Sort and Search features

If the table does not display the Sort and Search features, follow these steps:

  1. Open the Table Properties
  2. Change the Headers option
  3. Deselect Enable Sort and Search
  4. Close the Table Properties and [Save] the page
  5. Re-open the Table Properties
  6. Change the Headers back to First row or First row & column
  7. Re-select Enable Sort and Search
  8. Close the Table Properties and [Save] the page

 Modify table properties

  1. Place the cursor in any cell of the table
  2. Right-click the mouse to display the Table Menu.  DO NOT select the table icon from the toolbar to edit an existing table.  It will result in inserting a table within a table
  3. Choose Table Properties
    The Table Properties will be displayed
  4. Refer to steps 3 and 4 above

table context menu

Add cell background colour to specified cells

If multiple tables are used on one page, you may use the Cell Properties to set the % of each column if uniformity is desired.

  1. Place the cursor in the applicable cell (drag mouse to select multiple cells)
  2. Right-click the mouse to display the Table Menu
    The Table Menu will be displayed
  3. Choose Cell Properties
    The Cell Properties box will be displayed
  4. Enter the following colour code in the Background Color field, and click [OK]
Hex Code Colour
#F1F1F2 #F1F1F2

The Cell Properties box will be closed and the cell background colour displayed

Cell Properties box

 

​Add/delete rows and columns

  1. Place the cursor in the location of the table that you want to insert/delete a row or column
  2. Right-click to display the Table Menu 
  3. Choose Row or Column from the menu
  4. Select the applicable option
    The Table Menu will close and the table will be re-displayed with the selected option implemented

 Delete a table

  1. Place the cursor in any cell in the table
  2. Right-click to display the Table Menu
  3. Choose Delete Table
    The table will be removed from the Body

See Interface Guidelines for information about removing, moving or adding paragraphs between panels