The Purpose of Tables
The purpose of data tables is to present tabular information in a grid with columns or rows that show the meaning of the information in the grid. Sighted users can visually scan a table and make visual associations between data in the table and their appropriate row and/or column headers.
A person who cannot see the table cannot make these visual associations, so proper markup must be used to make a programmatic association between elements within the table. When the proper HTML markup is used, users of screen readers can navigate through data tables one cell at a time, and they will hear the column and row headers spoken to them.
Tables should never be used purely to visually format content.
Note for Web Editors
The information presented on this page assumes that you have a working knowledge of HTML tables – it is not a complete guide on how to create accessible tables. If you are not familiar the latest standards for HTML tables, then check out the websites listed under resources.
The following information is specific to the Los Rios websites and utilizes code that we have implemented in our HTML and CSS templates.
Table Requirements
Accessible data tables must have column and row headers. In the markup, tables must contain the <thead> element and the <th> element. In the following example, the column headers for this table are Date and Session, while the row headers are September 14 and September 15.
| Date | Session |
|---|---|
| September 14 | Leadership – What It Is, Who You Are, and Finding a Mentor |
| September 15 | How Leaders Behave and Communicate |
Table headers should never be empty. This is particularly of concern for the top-left cell of some tables.
The scope attribute should be used on each <th> element Here is the markup for an example table using the scope attribute:
<table>
<thead>
<tr>
<th
scope="col">Date</th>
<th
scope="col">Session</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
September 14</th>
<td>
Leadership – What It Is, Who You Are, and Finding a Mentor</td>
</tr>
<tr>
<th scope="row">
September 15</th>
<td>
How Leaders Behave and Communicate</td>
</tr>
</tbody>
</table>
Though screen readers may correctly guess whether a data cell is a column header or a row header based on the table layout, assigning a scope makes this unambiguous.
Additional Table Classes, Attributes, and Structure
To make a table visually responsive on small screens, use the following classes and attributes.
Add table-wrap Class to Table Element
The table must have the class table-wrap applied.
<table
class="table-wrap">
<thead>
<tr>
<th scope="col">Date</th>
<th
scope="col">Session</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row"
data-th="Date">September 14, 2021</td>
<td
data-th="Session">Leadership – What It Is, Who You Are, and Finding a Mentor</td>
</tr>
<tr>
<td
scope="row"
data-th="Date">September 15, 2021</td>
<td
data-th="Session">How Leaders Behave and Communicate</td>
</tr>
</tbody>
</table>
Use the data-th Attribute on Each Data Cell
Include the data-th attribute on each <td> element within each row. The data-th attribute should contain the same text (or equivalent meaning) as the associated header for the data cell. Here is the markup for the table, using the data-th attribute:
<table class="table-wrap">
<thead>
<tr>
<th scope="col">Date</th>
<th
scope="col">Session</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row"
data-th="Date">September 14, 2021</td>
<td
data-th="Session">Leadership – What It Is, Who You Are, and Finding a Mentor</td>
</tr>
<tr>
<td
scope="row"
data-th="Date">September 15, 2021</td>
<td
data-th="Session">How Leaders Behave and Communicate</td>
</tr>
</tbody>
</table>
Data Cells With Multiple Elements
If a data cell contains multiple elements, then the content needs to be wrapped in a container to display appropriately in mobile. For example, if your data cell contains both text and a line break, then you can wrap both in a <div>.
<table
class="table-wrap">
<thead>
<tr>
<th scope="col">Date</th>
<th
scope="col">Session</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row"
data-th="Date">September 14, 2021</td>
<td
data-th="Session">
<div>Leadership Skills 1<br />Leadership – What It Is, Who You Are, and Finding a Mentor</div>
</td>
</tr>
<tr>
<td
scope="row"
data-th="Date">September 15, 2021</td>
<td
data-th="Session">How Leaders Behave and Communicate</td>
</tr>
</tbody>
</table>
How This Works
When the table-wrap class is applied to a table, the CSS adjusts the table display when the screen or browser window width is smaller than 768 pixels. The CSS does the following:
- Visually hides the table header (
<thead>) - Adjusts each table row to display its data cells (
<td>) in a column instead of a row - Creates a pseudo-element containing the text from the data-th attribute and displays it to the left of the its associated data cell (
<td>)
Use the class table-layout-fixed on the table to make the column widths uniform. This class can be applied in addition to the table-wrap class. Here is the markup for the table, using the table-layout-fixed class:
<table
class="table-layout-fixed">
<thead>
<tr>
<th
scope="col">Date</th>
<th
scope="col">Session</th>
</tr>
</thead>
<tbody>
<tr>
<td
scope="row">September 14, 2021</td>
<td>Leadership – What It Is, Who You Are, and Finding a Mentor</td>
</tr>
<tr>
<td
scope="row">September 15, 2021</td>
<td>How Leaders Behave and Communicate</td>
</tr>
</tbody>
</table>
| Date | Session |
|---|---|
| September 14, 2021 | Leadership – What It Is, Who You Are, and Finding a Mentor |
| September 15, 2021 | How Leaders Behave and Communicate |
Use the <caption> element to provide brief descriptive text that indicates the content of the table. The <caption> element must be the first thing after the opening <table> tag.
Though tables are not required to have captions, captions are generally very helpful. Most screen readers announce the content of captions. Captions help users to find a table, understand what it's about, and decide if they want to read it.
<table class="table-layout-fixed">
<caption>Classified Leadership Academy Schedule</caption>
<thead>
<tr>
<th
scope="col">Date</th>
<th
scope="col">Session</th>
</tr>
</thead>
<tbody>
<tr>
<td
scope="row">September 14, 2021</td>
<td>Leadership – What It Is, Who You Are, and Finding a Mentor</td>
</tr>
<tr>
<td
scope="row">September 15, 2021</td>
<td>How Leaders Behave and Communicate</td>
</tr>
</tbody>
</table>
| Date | Session |
|---|---|
| September 14, 2021 | Leadership – What It Is, Who You Are, and Finding a Mentor |
| September 15, 2021 | How Leaders Behave and Communicate |