Accessible Tables

View the full library of accessibility solutions.

First and foremost, tables should only be used to present data. Never use tables for layout, not even for forms. Leverage your CSS super-powers to get the layout you want.

Rules for accessible tables

• Assign the scope attribute to your <th> (col or row).
• Use proportional sizing. Size your <col> with percentages. Never style the <table> with absolute widths such as pixels.
• Add a caption as the first child of the <table> (the summary attribute is depreated in HTML5).
• Never use the rowspan. It confuses screen readers.
• Never nest tables.
• Follow the K.I.S.S. rule — If you find yourself trying to nest tables, using too many colspans, solving for multiple rows of headings, it may be time for a new column or even a new table.

Code sample