There are two types of tables – layout and data.
In the early website days, many sites were built using layout tables to arrange content on pages. Over the years, development has changed and evolved into using cascading style sheets (CSS) to layout pages. Compared to layout tables, CSS provides cleaner, more simple code, provides better options for displaying content, and fewer potential accessibility issues. In general, it’s best practice to avoid using tables for layout.
Data tables show the relationship of data in an organized way. When properly structured with column and row headers, screenreader users can understand the meaning of the data in the table. Most website content management systems (CMS) have options to easily add headers, a caption, and data to tables without needing to know how to code. You just have to remember to use these options to make your tables accessible.
Resources
Creating Accessible Tables
(Web Accessibility in Mind (WebAIM))
Both layout and data tables are included in this article. It’s recommended not to use tables for layout, but if you don’t have any other options there’s some information in this article that you will want to consider. The data tables section may seem a little overwhelming because it refers to some simple table code. It’s a good idea to become familiar with the code, but most website content management systems will provide the option to add table headers, captions, and data without needing to touch the code.
Introduction to Accessible Tables and a Screen Reader Demo (approx. 3 minute video)
(Pope Tech)
This video explains how to make a data table accessible and how a screen reader behaves when reading a table with proper headers vs. one that does not.
Beginner’s Guide to Accessible Tables
(Pope Tech)
This article explains what data and layout tables are, why accessible data tables matter, and what you need to do to make tables accessible.
HTML Tables – A Beginner’s Guide (2025)
(HTML Tables)
I feel like it’s beneficial for content creators to become familiar with the basics of website code, and this article does a great job of explaining the HTML code behind tables with examples. In addition, it also has some helpful content about when to use tables, when not to use tables, and best practices.
Caption & Summary
(W3C Web Accessibility Initiative (WAI))
This article will help you get a better idea of what captions and summaries are. I recommend reading through the beginning but stopping after Example 2, Approach 1. Approaches 2 and 3 are not preferred solutions since they may not be supported by all assistive technology.
Notes and Tips
Tables for Layout: It is recommended that tables not be used for layout purposes. If your website already has layout tables or you have a unique use case to include one, don’t use structural elements (like headers <th> or captions <caption>), and do add role="presentation" to the <table> element.
Alignment: Within table cells, align text to the left and numeric data to the right (in left-to-right languages), so that people using larger text sizes or smaller screens will be able to find it. Give column headers the same alignment as the data in the cells below them.