D4 - Headers in Tables


Table Header Basics

Tables convey information spatially by organizing data in a grid but students with sight impairments can't benefit from this visual illustration of the relationship between cells. To make tables usable by everyone, they need HTML markup that indicates header cells (describing the category of data in that row/column) and data cells.

In the majority of data tables, column headers are needed. Some tables do not have data that would require any header cells, and some tables need both column and row header cells indicated, as shown below.

The example table below shows column header and row header cells.

  Col Header Col Header Col Header Col Header Col Header
  Breed Type of Breed Coat Lap Cat Adult Weight
Row Header Bengal Hybrid Short No 15
Row Header Scottish Fold Natural/Mutation Short No 9
Row Header Siberian Natural Long Yes 14
Row Header Tonkinese Crossbreed Short Yes 10 


It is preferred that tables be used for organizing data and not simply for formatting (e.g., avoid putting an image and a caption in a 2-celled table to create a page banner).

Canvas' Accessibility Checker

The Accessibility Checker tool in Canvas does a great job of walking you through how to make a table accessible. Once you've got your table on the page, follow these steps.

  1. Click the Edit button and reveal the Rich Content Editor.
  2. Click the Accessibility Checker icon (the "little person" icon) in the RCE toolbar.
  3. You'll be prompted to add a descriptive caption to your table; then click "Apply".
  4. You'll then be prompted to set table headers. Choose Header row, Header column or Header row and column from the dropdown menu and click "Apply".
    "set table headers" dropdown menu
  5. Save the page.

Setting the Table Cell Properties Manually

You can also set the header cells of a table from within the Table tool:

  1. Click the Edit button and reveal the Rich Content Editor.
  2. Click on a cell in the table (or highlight an entire row/column).
  3. Click on the table icon in the Rich Content Editor toolbar to access a drop down menu.
  4. Choose Cell > Cell properties.

accessing cell properties.png

  1.  Set the Cell type to Header cell.
  2. If using both Column and Row headers, set the Scope to Column or Row depending on the type of cell.

setting cell type.png

  1. Click OK and then save the page.

For complex tables with irregular headers (cells that span multiple columns or rows) or multi-level headers (headers that can’t be associated in a strictly horizontal or vertical way), please ask your campus's Accessibility Specialist for assistance.


Please be sure to view both tabs before clicking Next