ALIGNED: Column and/or row headings are designated and the table is identified with a concise caption.

Faculty
Reviewers

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 a 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

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.

Click the Edit button and reveal the Rich Content Editor.
Click the Accessibility Checker icon (the little man) in the RCE toolbar.
You'll be prompted to add a descriptive caption to your table; then click "Apply".
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".
Save the page.

Setting the Table Cell Properties Manually

To set the header cells of a table:

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

New RCE Cell Properties

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

Cell Properties options

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.

Once a heading has been styled using the RCE, you can make format changes (bold, italics, font size, or color), if desired.

We suggest you download a copy of the Course Design Rubric, if you don't have one yet.

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.

Image of 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

image of Data table

Be sure to review the relevant tabs before you leave this page.

The CVC-OEI Course Design Resources by CVC-OEI is licensed under a Creative Commons Attribution 4.0 International License Development of this course was funded by a grant from the California Community Colleges' Chancellor's Office.