University of Auckland logo

Stay informed

Receive updates on teaching and learning initiatives and events.

Photo by rivage on Unsplash

5. Tables

Tables are often used in Canvas courses to organise information such as timetables and assignments.

A well-constructed table involves defining header cells and the cell scope. This allows screen reader software to read aloud the headings by column, and the data by rows, therefore giving the data a meaningful structure.

The general rule is to only use tables for tabular data, rather than page layout. Consider using Canvas Design Blocks as an alternative tool for designing layout.

DO

Use tables for tabular data

tabular data

A table with three columns, a header row and three data rows.

DON’T

Use tables for layout

A tables for layout

A table with two columns. In the left hand column is a lecturer’s name, role, and faculty, and in the right hand column is their profile image.

Fixing issues with UDOIT

Problem 1: No table headers found

Meaning

Table headers provide a description of the table structure. Tables without properly identified header cells can be hard to interpret and navigate for students who rely on screen readers.

How to fix it

In UDOIT Advantage, click the Review button for more information. Select the header option (column header, row header or both) for your table and click save.

 

Select table direction

Select table direction to set headers. Options are column header, row header, or both.

Problem 2: No row or column scope declarations found in table headers

Meaning

Table headings have no defined scope attribute. Adding a scope helps screen readers determine whether the headers are for rows or columns.

How to fix it

In UDOIT Advantage, click the Review button for more information. Select the option that defines the scope for your table headers and click save.

Select the scope

Select the scope for table headers in UDOIT. Options are column header, row header, or both.

Problem 3: “Pre” elements should not be used for tabular data

Meaning

Using <pre> elements in HTML preserves the layout and spacing (including tabs), which allows for ‘content that looks like a table’. However, screen readers and browsers perceive this as text rather than structured data. Creating a properly formatted table in Canvas indicates header cells and data cells and defines their relationship.

How to fix it

This issue cannot be resolved in the UDOIT tool. Edit the Canvas page, create a new table and copy the data in to the table.

Problem 4: Table without content detected

Meaning

The UDOIT tool has found an empty table.

How to fix it

This problem cannot be resolved in UDOIT. Edit the page in Canvas and populate the table with data or delete the table.

Getting it right in Canvas

Canvas table cell properties

In the Canvas rich content editor, follow the menu TableCell and click on Cell properties.

Canvas table cell properties

Canvas’ table menu in the rich text editor. Table cell properties is selected.

Setting cell headers

Highlight the cells in the table which contain headers. Then follow the instructions above to open the Cell properties.
Under Cell type, select Header cell then continue to set the scope of the headers or click Save.

Setting Canvas table cell type

Setting Canvas table cell type via the table cell properties menu in the rich text editor. Options are cell or header cell.

Highlight the cells in the table which contain headers. Then follow the instructions above to open the Cell properties.
Under Cell type, select Header cell then continue to set the scope of the headers or click Save.

Setting cell scope

Setting the scope of table headers assists screen readers determine the direction of the table.
The scope is set in Cell properties. The options include Row – for headers of a single row, Column – for headers of a single column, Row group – for headers of multiple rows and Column group – for headers of multiple columns.

Setting the table cell scope in Canvas

Setting Canvas table cell scope via the table cell properties menu in the rich text editor. Options are row, column, row group or column group.

Page added 27/05/2024

Send us your feedback

What do you think about this page? Is there something missing? For enquiries unrelated to this content, please visit the Staff Service Centre

This form is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.