Tables

Consider the following table:

Great TV Shows

Programs | Network | Original Timeslot | Genre | Creator
Scrubs | NBC | 21:30 Tuesday | Comedy | Bill Lawrence
Six Feet Under | HBO | 21:00 Sunday | Drama | Alan Ball

The Office

BBC

21:00 Friday

Comedy

Ricky Gervais,
Stephen Merchant

The Shield | FX | 22:00 Tuesday | Crime | Shawn Ryan
The X-Files | FOX | 21:00 Friday | Crime | Chris Carter
Twin Peaks | ABC | 21:00 Thursday | Drama | David Lynch

Awesome TV shows, you say. Sure. But what of it? Apart from the data you see, how do you tell good tables from bad?

Tables are a special case in HTML because they are one of the few components that enables rich description, an outgrowth of the language’s roots as a tool for academic communities. Tables are a method of describing information in terms of one or more variables. They represent relationships between categories of data, so you can use them to say, “this set of things has these characteristics.”

The best tables make sense regardless of the tool you use to inspect them. Because there are so many elements available (e.g. thead, tbody, colgroup) it’s not obvious what’s necessary and what’s optional. For smallish tables like this one, the easiest way is with th and the scope attribute. This element is essential for making tables meaningful because it instructs user agents how to model the table as a set of headers and data that have specific relationships.

A great way to see how this works is to take a look at an accessible table using James Graham’s excellent Table Inspector tool. Here’s the code from the table above to use as a sample. Be sure to click on the table cells to observe the relationships between heading and data cells. This gives an idea of the abstract relationship that any user good agent will attempt to convey, whether it’s visual or not. (The summary saves time for visually impaired users.)


Great TV Shows

Programs
Network
Original Timeslot
Genre
Creator


Scrubs
NBC
21:30 Tuesday
Comedy
Bill Lawrence


Six Feet Under
HBO
21:00 Sunday
Drama
Alan Ball


The Office
BBC
21:00 Friday
Comedy
Ricky Gervais, Stephen Merchant


The Shield
FX
22:00 Tuesday
Crime
Shawn Ryan


The X-Files
FOX
21:00 Friday
Crime
Chris Carter


Twin Peaks
ABC
21:00 Thursday
Drama
David Lynch