Use tables to display data and CSS for page layout. Make sure tables are accessible to screen reader users by designating row and/or column headers, ensuring users can change font and column sizes, not including form elements in the first column, and programmatically associating cells with their headings.
HTML table specifications were originally developed for the presentation of tabular data. In the early days of the internet, Web designers and developers commonly used tables to control the layout of webpage content as well because they couldn't easily do so with HTML. However, tables used for layout may be problematic for some users:
- Screen reader users may attempt to use table navigation for non-tabular information.
- Content in the top row and left column will be read as column and row headings and other content may be read out of order.
- Screen magnification users may find it difficult or impossible to resize content.
- Content may become truncated or disappear completely when enlarged.
Page layout can now be better controlled with modern CSS, which enables users to more easily apply personal style sheets, incorporate a zoom layout, and use an in-page selector to modify font sizes, color contrast, and column layouts.
HTML tables used to display data can also pose access issues. A screen reader can only read aloud each cell in a table one-by-one, from left to right and top to bottom. If the table is not formatted correctly, there is no easy way to determine what label a particular value in a cell might have.
Dos and Don'ts
Follow Core Skills Table Dos and Don'ts
- Use tables to display data.
- Designate at least one row and/or column header.
- Avoid or simplify complex tables.
- Provide contextual information such as a caption or alt text.
- Include content in all cells.
- Don't use tables to make your webpage look a particular way.
- Don't just change the visual formatting of the text to visually indicate table header rows and/or columns.
- Don't merge cells.
- Don't include a table within another table.
- Don't repeat the same contextual information, such as a caption that duplicates a heading.
- Don't leave any cells empty.
Learn more accessible table core skills.
Enable Users to Change Font and Column Sizes
Allow the user to dictate the font size based on their screen size and preference by using relative font sizes (percentages and em).
Enable user to change table and cell widths by using browser defaults or percentage widths.
Don't specify font sizes or table and cell widths in fixed sizes (px and pt).
Avoid Form Elements in the First Column
Include content in every cell or users may wonder if data was omitted by mistake.
Avoid the use of the following elements in the first column of a table:
- Text entry fields
- Radio buttons
- Select lists (dropdowns)
Programmatically Associate Cells with Their Headings
Associations between data cells and their corresponding row and column headings may be difficult or impossible to determine for some users. HTML markup should be used to establish programmatic associations among data cells and their corresponding row and column headers.
Use the scope attribute to identify whether a table header is a column header or a row header.
All <th> elements should generally always have a scope attribute.
Another way to associate data cells and headers is by using headers and id attributes, but this method is not recommended by WebAIM because it is more complex and the scope attribute is usually sufficient.