Tables Need Headers, Scope and Summaries

At one time, if you wanted to build a website layout with columns or any kind of fancy design, you would use tables to achieve that, even though tables were never intended to be used for structure. These days that practice is frowned upon (and using tables for layout is considered an accessibility error) but tables still have their place within a website. If you need to convey information that would be easiest for people to understand in something that looks like an excel spreadsheet, by all means use a table.

However, you need to make sure that the table has a summary (like an Alt Tag for tables) and that there are defined header rows with scope in order for your table to be accessible. That’s the Internet way of telling the table that this is a header in which direction. For example let’s refer to the following table which shows coffee consumption in cups by web developer. We use a div of "table-responsive" to enable responsiveness on mobile devices, and then use a table class of "table table-bordered" to achieve this interesting looking table:

DeveloperMorningAfternoonEvening
Ray 3 2 2
Deaon 2 0 1
Brett 1 1 0
Ryan 0 0 0

While it’s very easy for us to look at this table and instantly understand that Brett drinks one cup of coffee in the afternoon (and that Ray drinks too much coffee… but that’s an intervention for another time), it’s not as easy for the web browser software to understand that.

So in this example, we need to first define all the table cells in grey as table headers (TH), and all the cells in white as table data (TD). For the header cells across the top (times of day) they would need to be further defined to have a scope of “column” which tells the web browser that this header is the header for this column of data. Then the header cells down the sides (people) would need to have a scope of “row”.

There is also definitions for the header (thead), body (tbody) and footer (tfoot) that need to be set up correctly as well.

Here is the table after it has been made accessible with scopes, a thead, and corrected table headers:

DeveloperMorningAfternoonEvening
Ray 3 2 2
Deaon 2 0 1
Brett 1 1 0
Ryan 0 0 0

As tables are very complex issues with lots of accessibility issues, we recommend that if you need a table, you should contact Marketing & Communications and we can help create a table for you.