{"id":21070,"date":"2025-02-03T12:00:33","date_gmt":"2025-02-03T17:00:33","guid":{"rendered":"https:\/\/carleton.ca\/webaccessibility\/?page_id=21070"},"modified":"2025-06-09T08:21:08","modified_gmt":"2025-06-09T12:21:08","slug":"use-of-tables","status":"publish","type":"page","link":"https:\/\/carleton.ca\/webaccessibility\/use-of-tables\/","title":{"rendered":"Proper use of tables"},"content":{"rendered":"\n
\n
\n\n
\n
\n
\n

\n Proper use of tables\n <\/h1>\n \n \n <\/header>\n\n <\/div>\n\n <\/div>\n\n <\/div>\n<\/section>\n\n\n\n

Accessibility<\/h2>\n\n\n\n

Tables can be used to display the kind of information that is appropriate, and that kind of data only. It has to be created in a specific manner to optimize its accessibility.<\/p>\n\n\n\n

Reason<\/h2>\n\n\n\n

Tables can be a difficult feature to navigate on a web page, especially if it does not contain a table header row, or if it is used to lay out content instead of its actual purpose. <\/p>\n\n\n\n

Best practice<\/h2>\n\n\n\n

Here is an example of a properly constructed table with a header row, containing data appropriate to a table. <\/p>\n\n\n\n

Course<\/th>Department<\/th><\/tr><\/thead>
Math 1001<\/td>Math and Statistics<\/td><\/tr>
Statistics 1002<\/td>Math and Statistics<\/td><\/tr>
Environmental Studies 2002<\/td>Geography and Environmental Studies<\/td><\/tr>
History of Math 4004<\/td>History<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Example of less accessible practices<\/h2>\n\n\n\n

Here are some examples of a bad table.<\/p>\n\n\n\n

In this example, we find a table which has no header. It gives no context to someone using a screen reader:<\/p>\n\n\n\n

\"A<\/figure>\n\n\n\n

(You will notice that this is an image of a table – that is because the table function in cuTheme does not allow for a table to be created without<\/em> a table header row. Alt text on the image describes the problem with this table.)<\/p>\n\n\n\n

This table would not allow easy access to the tabular information.<\/p>\n\n\n\n

The second table (also an image) shows a table being used to layout page content using a table:<\/p>\n\n\n\n

\"A<\/figure>\n\n\n\n

Not only does this add confusion, many users will skip tables with no header row and so any useful\/crucial information will be missed. Besides why would you want to lay information out in this way when it could look like this?<\/p>\n\n\n\n

\n
\n\n \n
\n \n\n
\n
\n \"\"<\/figure>\n \n
\n \n \n \n

\n Dio\n <\/h2>\n\n <\/header>\n\n \n
\n

\n Cat ipsum dolor sit amet, flee in terror at cucumber discovered on floor but cats are fats i like to pets them they like to meow back. Grab pompom in mouth \n <\/p>\n <\/div>\n \n \n