Structure Data with Tables

Example Table

In the example table above, we have a caption that labels the table’s content as “Aggie Gameday Traditions.” The first row of content is full of header cells, labeling the relationship between the data in the table.

Building a Table in HTML

Building accessible HTML tables requires correctly labeling each table’s components — table rows (<tr>s), table headers (<th>s) and table data cells (<td>s) — and using the scope attribute.

In HTML, you input all of the table content row by row. Inside of each row, you add the number of cells by adding either header cells or data cells.

• A row is denoted by the <tr> tag.
• A header cell is denoted by the <th> tag.
• A data cell is denoted by the <td> tag.

Table Tags

All of the contents of a table go within the table element:

<table>
…
</table>

Table Captions

Tables should have an accompanying <caption>. This specifies the caption or title of a table, providing the table an accessible description. This element will be added directly under the opening <table> tag.

<table>
<caption> Aggie Gameday Traditions </caption>
…
</table>

Table Headers

To assist people who are using screen readers to navigate a table, it is critical to correctly label table headers using the scope attribute. Column headers require scope=”col” and row headers require scope=”row”.

Our example table uses a row header. Each table header cell needs a scope=”col” to denote to screen readers that the header cell applies to the column.

<table>
<caption> Aggie Gameday Traditions </caption>
<tr>
<th scope=”col”> Tradition </th>
<th scope=”col”> Description </th>
<th scope=”col”> Established </th>
</tr>
…
</table>

Table Data

The subsequent rows in our example table are made of data cells, denoted with a <td> element.

To further the accessibility of the table, we need to add a data-label to each data cell that matches the corresponding header cell. This allows the table to be understandable on small screens, where the table header label will display above each data cell, providing context to sighted users.

<table>
<caption> Aggie Gameday Traditions </caption>
<tr>
<th scope=”col”> Tradition </th>
<th scope=”col”> Description </th>
<th scope=”col”> Established </th>
</tr>
<tr>
<td data-label=”Tradition”> Aggie Band </td>
<td data-label=”Description”> The Fightin' Texas Aggie Band is nationally famous for its precision military marching formations on the football field and is the largest military marching band in the U.S. </td>
<td data-label=”Established”> 1894 </td>
</tr>
…
</table>

Putting It All Together

Taking everything we’ve learned, we can apply it to remake the example table used earlier on this page in HTML. On a website using Aggie UX, this markup will automatically be brand compliant and responsive.

<table>
<caption> Aggie Gameday Traditions </caption>
<tr>
<th scope=”col”> Tradition </th>
<th scope=”col”> Description </th>
<th scope=”col”> Established </th>
</tr>
 
<tr>
<td data-label=”Tradition”> Aggie Band </td>
<td data-label=”Description”> The Fightin' Texas Aggie Band is nationally famous for its precision military marching formations on the football field and is the largest military marching band in the U.S. </td>
<td data-label=”Established”> 1894 </td>
</tr>
<tr>
<td data-label=”Tradition”> Yell Leaders </td>
<td data-label=”Description”> Aggies don't cheer — they yell. And Yell Leaders are the ones who energize fans at Aggie gamedays and other events. </td>
<td data-label=”Established”> 1907 </td>
</tr>
<tr>
<td data-label=”Tradition”> Aggie Songs </td>
<td data-label=”Description”> Every song tells a story, and Texas A&M’s school songs tell what it’s like to be an Aggie and about the shared pride we have in our university. </td>
<td data-label=”Established”> 1918 </td>
</tr>
<tr>
<td data-label=”Tradition”> 12th Man </td>
<td data-label=”Description”> One Aggie's willingness to step up and help his teammates inspired one of our most well-known traditions, the 12th Man. </td>
<td data-label=”Established”> 1922 </td>
</tr>
<tr>
<td data-label=”Tradition”> Midnight Yell </td>
<td data-label=”Description”> The night before each home football game, Aggies head to Kyle Field for Midnight Yell to get hyped up for gameday and practice yells. </td>
<td data-label=”Established”> 1931 </td>
</tr>
<tr>
<td data-label=”Tradition”> Maroon Out </td>
<td data-label=”Description”> Once every football season, Aggies make sure to wear maroon T-shirts to form a sea of maroon in Kyle Field. Proceeds from the sale of shirts go toward scholarships and other needs. </td>
<td data-label=”Established”> 1998 </td>
</tr>
</table>

Use Siteimprove to Find Issues with Tables

Siteimprove can help you find accessibility issues related to tables on your webpages.

Find and Address Issues with Tables

To see if you have any of these issues on your site:

1. Log in to Siteimprove.
2. On the left side menu, open Accessibility > Issues.
3. On the Issues table, set the filters to Element type: Tables.
4. Click on each issue to get more information about how to address the issue and see affected pages.
5. Repeat this process on the Potential Issues (Accessibility > Potential Issues) page to review occurrences that need a human to review to see if they are issues.

Once you have identified the issue, go into your content management system (CMS) to address the issue and publish your changes.

After the page has been republished with your changes, go back to Siteimprove to rescan that page to see if the issue has been resolved.

Get Access to Siteimprove

All Texas A&M University website owners have the ability to monitor the accessibility (and quality assurance) of their sites using Siteimprove. Use Siteimprove to identify potential issues, learn how to address them and watch your scores over time. If you are responsible for a Texas A&M website, email web@tamu.edu with your name, NetID and the sites you are responsible for to get access.