User Tools

Site Tools


Tables and Grids

While it is possible to to use CSS flexbox and grid layouts to make any set of elements look like a table, you should use proper tables whenever both the horizontal and vertical axes contain information that is relevant to a cell.

As Sarah Higley puts it, the clue is whether items can be reflowed at smaller screen sizes without losing relevant information. Items that are organized into a grid for layout purposes where the column location is arbitrary, like a set of photo cards, should not be marked up as a table. If the data is the sort of thing where you might run your finger down one column and across the row to find a specific piece of metadata, as in a spreadsheet, then you should use a table.

Screen readers like JAWS have special commands and keyboard shortcuts to help visually impaired people navigate tables. These tools are not available for <div>s and other non-semantic elements that might be laid out in grids using CSS. See How screen readers navigate data tables by Léonie Watson (YouTube, 2 minutes).

Use <thead>, <tbody>, and <th> tags as needed to distinguish column and row headers from body cells. You should create the row and column associations with ARIA roles, for two reasons. For tables containing form inputs, we can recycle column and row headers to create unique form field labels. Also, when rearranging the contents of the table visually via CSS display properties, the built-in column and row associations will be lost, and screen readers will rely on ARIA to preserve the special keyboard navigation features for tables.

Tables can get visually crowded, which can create cognitive overload. Steve Schoger of Refactoring UI has tips on reducing the use of borders and using alignment and padding effectively to make tables look less overwhelming.

Further reading on tables


working branch converting eg-grid to tables

accessibility/tables.txt · Last modified: 2023/08/07 17:50 by scl

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki

© 2008-2022 GPLS and others. Evergreen is open source software, freely licensed under GNU GPLv2 or later.
The Evergreen Project is a U.S. 501(c)3 non-profit organization.