# Create accessible data tables

DevFeed: [Create accessible data tables](<https://devfeed.tech/articles/create-accessible-data-tables-9366.md>)

Original publisher: [Read original article](<https://a11yproject.com/posts/accessible-data-tables/>)

Author: Franklyn Roth

Published: 2016-03-05T00:00:00Z

Content type: tutorial

Language: en

Sources: [The A11Y Project](<https://devfeed.tech/sources/the-a11y-project.md>)

Topics: [data](<https://devfeed.tech/topics/data.md>), [Usability](<https://devfeed.tech/topics/usability.md>), [User interface design](<https://devfeed.tech/topics/ui-design.md>)

Tags: [data](<https://devfeed.tech/tags/data.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [scope](<https://devfeed.tech/tags/scope.md>), [usability](<https://devfeed.tech/tags/usability.md>)

## AI overview

A tutorial on making HTML data tables accessible to screen readers by adding a table caption and marking row and column headers with the scope attribute.

## Source excerpt

The semantic purpose of a data table is to present tabular data. Sighted users can quickly scan the table but a screen reader goes through line by line. Proper markup must be added to help the screen reader make the correct associations that a sighted user would. Example of an accessible data table <table> <caption>Monthly Budget</caption> <thead> <tr> <th scope="col">Month</th> <th scope="col">Amount Earned</th> <th scope="col">Amount Spent</th> <th scope="col">Amount Saved</th> </tr> </thead> <tbody> <tr> <th scope="row">January</th> <td>$2500</td> <td>$1500</td> <td>$500</td> </tr> <tr> <th scope="row">February</th> <td>$2700</td> <td>$1500</td> <td>$700</td> </tr> </tbody> </table> Making an accessible table isn't hard and can be broken down into two main things. Add a table caption. Mark row and column headings using the 'scope' attribute Table captions Table captions are added right after the opening <table> tag with <caption>Your caption goes here</caption>. The screen reader will then say "Table with 3 rows and 4 columns, Monthly Budget" or something to that effect. Without this, the screen reader will just start reading off the values inside the table, which is going to be frustrating and not super useful. Imagine reading an entire table cell by cell and then piecing together what the table is trying to tell you. Skip CodePen embed. See the Pen Accessible Data Tables by Franklyn (@franklynroth) on CodePen. Row and column headings For sighted users, row and column headings of tables are often highlighted visually. The screen reader will need this information coded into the markup. Column headers should be marked using scope="col". The scope="col" typically goes on the <th> element. If the <th> is a column like the "Amount Earned", "Amount Spent" and "Amount Saved" in my example, you would put them all as scope="col". This lets the screen reader know that the <th>'s are column headers for that entire column. Column headers should be unique. Row headers should