Data Tables

The use of HTML tables is reserved for displaying data in an organized manner. Data tables present tabular information in a grid. They are made up of columns and rows that communicate the meaning of the information. It is not proper to use table code to control webpage layout or design as this creates barriers for screen reader users.

Users with functioning vision can visually scan tables, quickly making visual associations between data in the table and their appropriate row and/or column headers. Someone who cannot see the table cannot make these visual associations, so additional markup must be added.

When HTML markup is in place, screen readers can navigate through data tables one cell at a time, and they will hear the appropriate column and row headers spoken to them.

Table Captions

A heading is often needed to describe the data contained in the table. One option is to include an <h2> or <h3> heading directly before the table. If an <h2> or <h3> heading does not make sense based on your content structure, a table heading must instead be enclosed in the <caption> element. The <caption> element must be the first thing after the opening <table> element.

<table>
<caption>Endowments: College of Engineering</caption>
. . .

Row and Column Headers

An accessible data table must have clear designations for the row and/or column headers so screen readers can properly relay the information.

Identifying Headers

In your code, the <td> element is used for table data cells and the <th> element is used for table header cells. You can use headers at the top of columns and/or at the beginning of rows. If an element is a header, you must use the appropriate <th> code.

Identifying Scope

In addition to using <th> and <td> appropriately, it is necessary to identify the scope of your headers. Individuals with functioning vision can distinguish if a <th> corresponds to a column or row. Screen readers need an additional scope attribute to communicate this properly. Use scope="col" in any header elements for columns and use scope="row" in any header elements for rows.

<table class="auto striped" style="min-width: 100%;">
<caption>Endowments: College of Engineering</caption>
<tbody>

<tr>
<th scope="col">Department</th>
<th scope="col">2014-15</th>
<th scope="col">2015-16</th>
<th scope="col">2016-17</th>
</tr>

<tr>
<th scope="row">Chemical Engineering</th>
<td>$2,945,263</td>
<td>$3,160,000</td>
<td>$3,252,000</td>
</tr>

<tr>
<th scope="row">Civil, Environmental, and Geospatial Engineering</th>
<td>$2,725,263</td>
<td>$3,160,521</td>
<td>$3,467,462</td>
</tr>

<tr>
<th scope="row">Electrical and Computer Engineering</th>
<td>$4,244,262</td>
<td>$5,160,563</td>
<td>$6,252,543</td>
</tr>

</tbody>
</table>


Table Examples

Using proper table captions, headers, and scope, our example Modern Campus CMS table is visually appealing to users regardless of ability or disability, including those with screen readers. 

Table Example: Standard Michigan Tech Design

Table Example: Non-Michigan Tech Design

WebAIM's accessible tables tutorial shows some examples of accessible tables, which do not use Michigan Tech's standard design and styles. Your table may look different, depending on what web system you are using and what CSS is being applied.

Learn More

To learn more about the principles of creating accessible tables:

• WebAIM: Creating Accessible Tables
• WAI: Tables Concepts

Modern Campus CMS

To learn more about creating accessible tables in Modern Campus CMS, along with options for modifying table styles:

• Webmaster's Blog: Creating and Styling Tables