Web Accessibility at the University of California

Mark Up Data Tables Correctly

• About
• Guiding Principles
• Recommended Standards
• Guidelines
  • Content Developers
  • Web Developers
  • Writers and Editors
• Technical Topics
• Tools and Testing
• Campus Assistance
• Training for Developers
• Other Resources
• Policy
•  
• Resources Home
• Initiative Home

The Challenge
Because screen readers read a Web page from top to bottom and left to right, information placed in tables is often very difficult to understand. If you use the proper HTML markup for data tables, screen reader users will be able to navigate through the table much more easily.

Solutions

• Designate row and column headers using the <th> tag.
• Associate the data cells with the appropriate headers.
• Use proportional sizing, rather than absolute sizing.
• Provide names or titles for data tables using the <caption> tag.
• Provide summaries using the summary attribute.
• Avoid spanned rows or columns
• Avoid tables with more than two levels of row and/or column headers.

Additional Information

• Section 9 of Jim Thatcher's tutorial on accessible tables
• WebAIM article on creating accessible tables