Tables

October 18, 2007 / HTML tables are a method of describing information in terms of one or more variables, an outgrowth of the language’s roots as a tool for academic communities.

Consider the following table:

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.)

<table summary="Features of great TV shows">
	<caption>Great TV Shows</caption>
	<tr>
		<th scope="col" class="column">Programs</th>
		<th scope="col">Network</th>
		<th scope="col">Original Timeslot</th>
		<th scope="col">Genre</th>
		<th scope="col">Creator</th>
	</tr>
	<tr>
		<th scope="row" class="row">Scrubs</th>
		<td>NBC</td>
		<td>21:30 Tuesday</td>
		<td>Comedy</td>
		<td>Bill Lawrence</td>
	</tr>
	<tr>
		<th scope="row" class="row">Six Feet Under</th>
		<td>HBO</td>
		<td>21:00 Sunday</td>
		<td>Drama</td>
		<td>Alan Ball</td>
	</tr>
	<tr>
		<th scope="row" class="row">The Office</th>
		<td>BBC</td>
		<td>21:00 Friday</td>
		<td>Comedy</td>
		<td>Ricky Gervais,<br /> Stephen Merchant</td>
	</tr>
	<tr>
		<th scope="row" class="row">The Shield</th>
		<td>FX</td>
		<td>22:00 Tuesday</td>
		<td>Crime</td>
		<td>Shawn Ryan</td>
	</tr>
	<tr>
		<th scope="row" class="row">The X-Files</th>
		<td>FOX</td>
		<td>21:00 Friday</td>
		<td>Crime</td>
		<td>Chris Carter</td>
	</tr>
	<tr>
		<th scope="row" class="row">Twin Peaks</th>
		<td>ABC</td>
		<td>21:00 Thursday</td>
		<td>Drama</td>
		<td>David Lynch</td>
	</tr>
</table>