D4 - Tables

Table Header Basics

Accessible data tables need HTML markup that indicates header cells and data cells and defines their relationship. In the majority of data tables, column headers are needed. Some tables need both column and row header cells indicated.

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

an example of correctly labeled table

	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 content (e.g., putting an image and a caption in a 2-celled table).

Using the Canvas Accessibility Checker to Format Your Table

 

Setting the Table Cell Properties Manually

To set the header cells of a table:

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.

  

5.  Set the Cell type to Header cell.
6. Set the Scope to Column or Row (or both) depending on the type of table

  

7. 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 can’t be associated in a strictly horizontal or vertical way), please ask your campus's Accessibility Specialist for assistance.

 

The Accessibility Checker tool in Canvas does a great job of walking you through how to make a table accessible.

PopeTech will indicate the presence of a layout table and allow for formatting of header row/column and caption.

The WAVE tool will display an icon to indicate the style of table present.

Tables should not be used simply for layout purposes (for example, using a two-celled table to put an image in one cell and text in another). Incorrectly formatted tables—without column/row headers and caption) will display a plain table icon which, when clicked, indicates layout table.

Correctly formatted tables will display a complex icon that, when clicked,  indicates data table. Additionally, you'll see indicators for the column or row headings.