Best Practices
7 Tables
In this section, we provide guidelines and recommendations for formatting tables.
What are tables?
In this context, tables refer to data tables, which include row and/or column header information to categorize content. (Tables that do not have headers are called layout tables.)
Are your tables simple or complex?
A simple table includes a maximum of one header column and/or one header row. A complex table includes more than one header column and/or header row, and may include merged or split cells.[1]
We recommend you make every effort to keep data tables as simple in structure as possible. The more complex the design of a data table, the less accessible it will be for some students using screen-reading technology. Screen readers move left-to-right, top-to-bottom, one cell at a time, and because a screen reader does not repeat a cell, merging or splitting cells can affect the reading order of a table.
However, you can use merged or split table cells if they are formatted correctly. Check out this web page to learn more: Tables Tutorial.
Who are you doing this for?
Who benefits?
Simplifying complex tables is beneficial to everyone. Making even simple tables accessible is essential for blind and low-vision students who use screen readers to interact with your materials.
In addition, the practice also benefits (among others) students who:
- Have ADHD or other cognitive disabilities
- Access your materials on their phones
- Are new to reading information in tables
What do you need to do?
In the same way that your content hierarchy needs headings and structure (see Organizing Content), tables need a properly defined structure to be accessible. This means that you must add row and column headers to define the different sections of data. Screen readers read tables horizontally—cell by cell, row by row—and row and column headers help give context to the data in each cell for students who are blind, have low vision, or have a cognitive disability.
Create simple tables
A simple table:
- Includes a table title or caption
- Has a maximum of one row of column headers and/or maximum of one column of row headers, with the appropriate scope assigned
- Avoids using merged or split cells
- Provides adequate cell padding (space around the data) for visual learners
Example 1: How to Create a Simple Table
The table below is a simple table. Reviewed against the preceding requirements list, this table:
- Includes a caption (Spring Blossoms)
- Has one row in which cells are tagged as column headers (Color Family, Bulbs, Shrubs, Trees), and one column (beginning on the second row) in which the cells are tagged as row headers (Pink, Yellow)
- Avoids the use of merged or split cells wherever possible
- Has adequate cell padding to provide space buffering around the data in each cell. (Cell padding in this table is set at “10”).
| Color Family | Bulbs | Shrubs | Trees |
|---|---|---|---|
| Pink | Tulips | Flowering currant | Ornamental plum |
| Yellow | Daffodils | Forsythia | Star magnolia |
For a student accessing the table through a screen reader, the first row of data following the column headers will be presented along the lines of:
- Row 2, Color family, column 1, Pink
- Bulbs, column 2, Tulips
- Shrubs, column 3, Flowering currant
- Trees, column 4, Ornamental plum
Marking cells in the first row and/or column of a table as header cells allows a screen reader to interpret the structure of a table and how cells relate to each other. This, in turn, ensures that someone using a screen reader can navigate through a table and understand what column/row a given cell is in. If a table doesn’t have headers, the screen reader will recite cell information starting in the upper left corner and continuing left to right, top to bottom.
How to mark cells and rows as headers
As with section headings, it is not enough to bold or enlarge text in table cells that you want to be marked as headers.
If you are familiar with HTML, you can go into the text editor and change tags to tags. Row-header tags are given the scope="row" attribute and column-header tags get a scope="col" attribute.[2] See Example 2 for how to create an accessible HTML table.
For those not comfortable with HTML, below is how you create table row and column headers in Pressbooks. Word tables include a default header row. You can use headings to style a heading row in tables in Google Docs.
- Create your table and fill the cells with data.
- Select all of the cells that will be your column headers. (This should be all cells in the first row of your table.)
- select the table icon from the top menu of the Visual editor: Table icon > Cell > Table cell properties.
- set the “Cell type” to “Header cell.”
- set the “Scope” to “Column.”
- Select all of the cells that will be your row headers. (This should be all cells in the first column of your table, except for the cell in the first row, which has already been marked as a column header.)
- select the table icon from the top menu of the visual editor: Table icon > Cell > Table cell properties.
- set the “Cell type” to “Header cell.”
- set the “Scope” to “Row.”
How to create a table caption
Select your table, click the Table icon > Table Properties and check “Caption.” Select the space directly above the center of the table you created and type your caption.
An example of an inaccessible table header would be one that appears either before or after the table, with no markup connecting the title to the table.
Example 2: Accessible HTML Table Markup
<table><caption>Table 1.1 Spring Blossoms</caption>
<thead>
<tr>
<th scope="col">Color Family</th>
<th scope="col">Bulbs</th>
<th scope="col">Shrubs</th>
<th scope="col">Trees</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Pink</th>
<td>Tulips</td>
<td>Flowering currant</td>
<td>Ornamental plum</td>
</tr>
......
</tbody>
</table>
Add a [Skip Table] option
For large data tables, it can be a good idea to add a link which will allow people to skip the content of the table. See Table 2.4 for an example.
| [Skip Table] | |||
| Method | Implementation | Advantages | Challenges |
|---|---|---|---|
| Survey | Questionnaires and interviews. | Yields many responses, can survey a large sample, data can be generalized, and quantitative data are easy to chart. | Can be time consuming, can be difficult to encourage participant response, and captures what people think and believe, but not necessarily how they behave in real life. |
| Fieldwork | Observation, participant observation, ethnography, case study. | Yields detailed, accurate, and real-life information. | Time consuming, data are often descriptive and not conducive to generalization, researcher bias is difficult to control for, qualitative data are difficult to organize. |
| Experiment | Deliberate manipulation of social customs and mores. | Tests cause-and-effect relationships. | Hawthorne effect, artificial conditions of research, and ethical concerns about people’s well-being. |
| Secondary data analysis | Analysis of government data (census, health, crime statistics), research of historic documents, and content analysis. | Makes good use of previous sociological information. | Data could be focused on a purpose other than yours, data can be hard to find, and taking into account the historical or cultural context of texts. |
As shown, this link is best placed in a row preceding the column headers. That way, someone using a screen reader will hear the caption of the table before being given the option to skip the table.
Attributions
- Table 2.4. “Main Sociological Research Methods” in Introduction to Sociology – 2nd Canadian Edition by William Little licensed under CC BY 4.0.
- Adapted from “Accessibility Toolkit—2nd Edition” by Amanda Coolidge, Sue Doner, Tara Robertson, and Josie Gray (a collaboration between BCcampus, Camosun College, and CAPER-BC) licensed under CC BY 4.0.
