Tables
Layout Tables
Any new site should use CSS for layouts – never tables. Navigating layout tables with a screen reader becomes increasingly difficult with complex table layouts. It’s much easier to control the position of various elements with CSS and still maintain the proper structure of the web site.
Beyond the accessibility issues, sites made with layout tables take longer to load and take up more bandwidth. They may also interfere with search engine crawling and indexing.
Data Tables
- Always use row and column headers (the
<th>tag) and<scope>to associate the data cells with the appropriate header. The<scope>tag lets the screen reader know everything under a column is related to the header on top; and everything to the right of the row header is connected to that header. - In more complex tables,
<id>is used with column or row spans; however, the more complex the table, the more difficult it is to use with a screen reader. Try to keep the tables as simple as possible and limit the amount of row or column spans. - Create titles for tables using the
<caption tag>.
Data Table Code
<table> <caption>Shelly's Daughters</caption> <tr> <th scope="col">Name</th> <th scope="col">Age</th> <th scope="col">Birthday</th> </tr> <tr> <th scope="row">Jackie</th> <td>5</td> <td>April 5</td> </tr> <tr> <th scope="row">Beth</th> <td>8</td> <td>January 14</td> </tr> </table>