How To Make a Web Site the Modern Way. Part 8: Tables!

Before I jump into the proper way to use tables, I’m going to share an anecdote that should bring a smile to the face of anyone who’s done this stuff for a while.

A few months ago I was both pleased and surprised to discover a web developer who didn’t really know how to lay out a page using tables. He had a sense of how it might work, but had never really done it. I was having him help out with an HTML email (where tables are still the safest bet) and the whole thing was a novelty for him. Looking at it, this makes sense as he’d been at the job for only a few years so he learned entirely in the modern era and he was lucky enough to only learn from good sources. Still, it was a new phenomena for me- encountering a developer who was purely from a CSS-based layout world.

Yes! We’re winning.

If you don’t know what I’m talking about when I talk about tables for layout, move along. There’s nothing to see here.

Anyway, tables.


Tables are for Tabular Data

Here’s a table full of data.

Boston Celtics Individual Scoring Highs
Total Player/Opponent Date Result/Score
60 Larry Bird vs. Atlanta (at New Orleans) 03/12/85 W/126-115
56 Kevin McHale vs. Detroit 03/03/85 W/138-129
53 Larry Bird vs. Indiana 03/30/83 W/142-116
51 Sam Jones at Detroit 10/29/65 L/106-108
50 Paul Pierce vs. Cleveland 2/15/06 L/109-113**
50 Larry Bird vs. Atlanta 11/10/89 W/117-106
50 Larry Bird at Dallas 03/10/86 L/115-116
49 Antoine Walker at Washington 01/07/98 L/108-110
49 Larry Bird vs. Portland 03/15/92 ** W/152-148
49 Larry Bird at Phoenix 02/15/88 W/107-106

And here’s the markup:

<table class="dataTable">
<caption>Boston Celtics Individual Scoring Highs</caption>
<th scope="col">Total</th>
<th scope="col">Player/Opponent</th>
<th scope="col">Date</th>
<th scope="col">Result/Score</th>
<td>Larry Bird vs. Atlanta (at New Orleans)</td>
<td>Kevin McHale vs. Detroit</td>
<td>Larry Bird vs. Indiana</td>
<td>Sam Jones at Detroit</td>
<td>Paul Pierce vs. Cleveland</td>
<td>Larry Bird vs. Atlanta</td>
<td>Larry Bird at Dallas</td>
<td>Antoine Walker at Washington</td>
<td>Larry Bird vs. Portland</td>
<td>** W/152-148</td>
<td>Larry Bird at Phoenix</td>

The important bits are as follows:

  • Use headers. The TH tags signifiy that those cells are headers. That makes them computer-readable, imparts meaning for screen readers and you can style them. Win-win-win.
  • Use the scope attribute which indicates whether the header is related to the col(lumn) or row.
  • Use a caption to describe the contents of the table
  • It’s not shown, but for complicated tables it’s useful to provide a summary attribute. A summary can describe, in greater detail than the caption, the purpose or structure of the table.

And there you have it, a quick jaunt through the wonderful world of data tables. We’re nearing the end of the tour through the body and then it’s onto CSS and JavaScript. Which will be super fun.

Leave a Reply

Your email address will not be published. Required fields are marked *