Tables Elements and Code

An accessible table is one that a student of any ability can use and understand. Accessible tables will also work with responsive design.

Table Dos

  • Specify headers: Format headers using the <th> tag, specifying their scope ( scope="row" or scope="col" ) so that they will be correctly associated with data when read by a screen reader.
  • Add a caption: Captions (<caption>Table Title</caption>) make it easy to refer to the table in page text and allow screen reader users to search for tables by name. 

Table Don'ts

  • Don't use multiple header rows or columns
  • Don't merge cells
  • Don't nest tables (put one table inside another)

Table Width Considerations

Table width is important for responsive (mobile-friendly) design. Currently, our Simple Editor in Evolution puts in a default width of 100% when you create a new table. You can change the percentage to make the table narrower, but it is a better practice to remove the width to allow the table to adjust to the content. Avoid fixed widths using pixels (see Table 1 for more detail). 

Method Rating Rationale
Table 1. Table-Width Methods
No width specified Best The browser will determine the best display for your table based on font size and window/screen width.
Width as a percentage (e.g., width="80%") Better Percentages are based on the overall size of the element containing them. If you specify a percentage width, the size of the columns in your table will be based on the width of the table as a whole. The table will adjust for different font and screen sizes by miniaturizing the layout you specified. This can be risky; you may feel that a width of 20% is plenty on a desktop, but your table would be rendered unreadable on a phone. 
Specific pixel widths (e.g., width="30px") Bad A pixel is an actual dot of light that makes up your screen. The number of pixels used to display something on the web depends on screen resolution and pixel size. If you specify a pixel width, your table will not adjust properly for various window/screen sizes or font sizes. You would be coding based on how the table looks with your screen resolution and your preferred font size.

 

Table Summary

The summary tag in HTML has been deprecated but can still be used. Watch the Making Table Data Accessible video Links to an external site. in this LinkedIn Learning course to learn more about the summary and some good strategies for providing helpful table information for all.

Good Table Example

Consider this simple data table. It is accessible because it has a caption and appropriate headers—in this case, both row and column headers. The width is set at 60%, and a table style is applied to enhance readability.

Table 2. Course Schedule
Course   Section    Time and Day  Location
Biology 331 001 1:15 M W F 214 Willard
Biology 412 003 1:45 T Th 112 Willard
Math 021 005 3:45 M W F 008 Sparks
English 015 001 8:15 M W F 012 Burrowes
History 100 002 11:30 M W F 035 Thomas
View Table Code 
<table class="ic-Table ic-Table--hover-row ic-Table--striped" style="width: 60%;" cellspacing="10" ><caption>Table 2. Course Schedule</caption>
<thead>
<tr>
<th scope="col">Course</th>
<th scope="col">Section</th>
<th scope="col">Time</th>
<th scope="col">Location</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Biology 331</th>
<td>001</td><table class="ic-Table ic-Table--hover-row ic-Table--striped" style="width: 60%;" cellspacing="10">
    <caption>Table 2. Course Schedule</caption>
    <thead>
        <tr>
            <th scope="col">Course</th>
            <th scope="col">&nbsp; Section&nbsp;&nbsp;</th>
            <th scope="col">&nbsp;Time and Day&nbsp;</th>
            <th scope="col">Location</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Biology 331</th>
            <td>001</td>
            <td>1:15 M W F</td>
            <td>214 Willard</td>
        </tr>
        <tr>
            <th scope="row">Biology 412</th>
            <td>003</td>
            <td>1:45 T Th</td>
            <td>112 Willard</td>
        </tr>
        <tr>
            <th scope="row">Math 021</th>
            <td>005</td>
            <td>3:45 M W F</td>
            <td>008 Sparks</td>
        </tr>
        <tr>
            <th scope="row">English 015</th>
            <td>001</td>
            <td>8:15 M W F</td>
            <td>012 Burrowes</td>
        </tr>
        <tr>
            <th scope="row">History 100</th>
            <td>002</td>
            <td>11:30 M W F</td>
            <td>035 Thomas</td>
        </tr>
    </tbody>
</table>
Updated April, 2023