Introduction to HTML Tables

When using tables on the web, accessibility best practices from digital documents still apply. Web pages and Canvas pages should still have programmatically determinable structure and text styles, and tables should only be used for data presentation, not for visual layout purposes. HTML markup is used to identify header cells and data cells within the table so that accessible technology such as screen readers can interpret the table correctly.

HTML table tag hierarchy means that everything that makes up the table is contained within the “table” tag and end tag. All parts of a row are contained in the “tr” tag and end tag. The table tag hierarchy on the code side, from outside to inside, is: table, tr (table row), then either th (table header) or td (table data). Each cell must be identified as either a header cell or a data cell.

Captions for HTML tables work like a title or heading for the table and are contained within “caption” tags directly after the opening table tag.

Good practice for HTML tables is to use the “scope” attribute with the header tags to define the direction of the header cells as applying to either a row or column.

While complex tables where headers span multiple rows or columns are possible, simple individual tables are recommended if possible, which may require a complex table to be split into several smaller tables.

Tutorials for Different Table Formats

Connect with the Instructional Accessibility Group

Improve your instructional accessibility through the IAG live trainings, access checks for individual materials, or course reviews.

Have more questions or need additional assistance? Email the Instructional Accessibility Group.