{"id":2864,"date":"2025-11-18T14:49:13","date_gmt":"2025-11-18T19:49:13","guid":{"rendered":"https:\/\/it.rutgers.edu\/digital-accessibility\/?page_id=2864"},"modified":"2025-12-03T22:08:46","modified_gmt":"2025-12-04T03:08:46","slug":"accessible-tables","status":"publish","type":"page","link":"https:\/\/it.rutgers.edu\/digital-accessibility\/accessible-web-content\/accessible-tables\/","title":{"rendered":"Accessible tables"},"content":{"rendered":"
\n\n
\n \n
\n
\n
\n
\n\t\t\t\t

Accessible tables<\/h1>\n\n<\/div>\n\t\t\t\t
<\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n\n\n<\/div>\n\n <\/section>\n\n\n
\n\n
\n \n

Tables can be a powerful tool for organizing and presenting data. While sighted users can easily navigate the column and rows to find the information they need, screen reader users are not able to do the same without headings that are appropriately tagged.<\/p>\n

Appropriate use<\/strong><\/h2>\n

You should always try to keep your tables simple and avoid complex layouts. You should also always ensure that you are using the th (Table Heading) tag to identify the heading rows or columns in your table, as in the example below:<\/p>\n

\r\n <table>\r\n  <tr>\r\n    <th>Date<\/th>\r\n    <th>Event<\/th>\r\n    <th>Venue<\/th>\r\n  <\/tr>\r\n  <tr>\r\n    <td>12 February<\/td>\r\n    <td>Waltz with Strauss<\/td>\r\n    <td>Main Hall<\/td>\r\n  <\/tr>\r\n  [\u2026]\r\n<\/table>\r\n<\/code><\/pre>\n
The WC3 provides great resources for how to code the following:<\/p>\n