More topics

Work with tables in CMS Lite

Last updated on March 28, 2025

Guide to creating and managing accessible tables in CMS Lite.

On this page

Make tables accessible

To support responsive design and meet web accessibility standards, follow these best practices when creating tables in CMS Lite.

Use tables only for data

  • Only use tables to display tabular data
  • Do not use tables for page layout

Example: Don’t use a table to create extra columns on a page

Keep the table structure simple

  • Do not merge cells
  • Only use headers in the first row/column
  • Don't merge tables by having a second heading row partway through the data
  • Use a consistent grid format, make sure every row and column has the same number of cells

Use recommended colours only

Provide context for all users

  • Use the Caption field to describe what the table shows
  • Use the Summary field to give additional context for users with screen readers

Learn about creating accessible tables and summary information in tables

Use descriptive captions (title)

Every table must include a clear and descriptive caption. The caption is the table's title, and appears above the heading row. Screen readers announce this first when reading a table, giving users immediate context.

Screen readers can skip around a page, so captions need to make sense on their own, without relying on the text above the table. Captions also help sighted users scan the page and understand what the table shows.

Use a caption that is specific and meaningful, not vague. A good caption still makes sense if the table is copied or shared on its own.

For example:

  • Vague: Example
  • Clear: Countries and their national flag colours (as of 2025)

If you skip these steps, features like Sort and Search may not work, and your table will not meet accessibility standards.

Sample table

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

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

orange
yellow

jaune
green

vert

Headers: "First row only" vs "First row & column"

The way you structure your table affects how screen readers interpret the content. Use the correct type of headers based on how your data is organized.

Tables with a header row only

Use headers only in the first row when the entire row is meant to be read together for context. Each cell in the row is related to the others, and the row doesn't depend on the first column to make sense. The first column is just one part of the information, not a label for the row.

Example of a table with a header row only:

The following table doesn’t need a header column because each row is not about the completion date. The date is just one detail. If you removed it, the row would still make sense. You just wouldn’t know when the course was completed.

Employee training completion status
Completion date Course name Status
March 5, 2020 Designing for inclusion Complete
March 23, 2024 Plain language in practice In progress
October 13, 2025 Writing for web accessibility Not started

Tables with a header row and column

Use both a header row and column when the first column labels the data in each row. Each cell gives standalone context when compared to the first row and first column.

Example of a table with headers in the first row and column:

For example, in the following table, each row is about a specific city. If you remove “Vancouver,” you don’t know what the data represents. The first column acts as a label for the row, so it must be marked as a header to give users full context.

Average monthly temperature by city (°C)
  January February March
Vancouver 5 6 8
Toronto -2 0 4
Halifax -4 -3 2

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

 

Insert and configure a table

Steps to insert a table

Follow these steps to insert a table onto a CMS Lite page:

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

Table Properties box

  1. Complete the fields to set the table properties: 
Set table properties
Element Instructions
Rows
  • Choose 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
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 Header
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
  • If it doesn't work, review the troubleshooting tips
Enable pagination elements
  • Pagination buttons are inserted at the bottom of the table
  • They split long tables into different 'pages'
Caption
  • Add a caption that will appear above the table which will display in the web browser
  • Captions provide context for the visually impaired
Summary
  • The summary does not display in the web browser, but will form part of the Page Source metadata information
  • Summaries make tables more accessible by giving context for people using screen readers
  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.

 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
  4. Refer to steps 3 and 4 of "Steps to insert a table"

table context menu

Standard table properties

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

Add cell background colour

Set column size

Use Cell Properties to set the width of each column to a uniform percentage (%).

  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 #F1F1F2 in the Background Color field, and click [OK]

This hex code has been tested and meets accessibility standards.  Only this code should be used on the gov.bc.ca site.

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

 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

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

Troubleshooting

Sort and search feature not appearing

General issue

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

Table copied from Excel

If you have copied the table from Excel and the Sort and Search features aren't working, you may need to remove the filter from the Excel table (shown in Excel as arrows in the table headers):

  1. In Excel, go to "Data"
  2. Deselect "Filter"
  3. Copy/paste the table into CMS Lite
  4. Right-click on the table to reapply the Table Properties

Alignment issues

If table alignment seems off:

  1. Right click on the table
  2. Select Table Properties
  3. Check that the table width is set correctly - the recommended width is 100%
  4. Adjust alignment using the drop-down menu to set it