Using the Right Tag for the Right Job - HTML5 Mastery: Semantics, Standards, and Styling - page 74

</table>
The preceding markup renders as shown in Figure 2-7 .
Figure 2-7. A basic table using th for header cells
This approach has several benefits. To begin with, it's a great aid to accessibility.
While a screen-reading device may, in the hands of a competent user, read the first
table example as “Name, Place of residence, Anselm Bradford, Auckland, Paul Haine,
Oxford,” with table headers available it can understand how the headers relate to the
data and read it as “Name, Anselm Bradford, Place of residence, Auckland, Name, Paul
Haine, Place of residence, Oxford…" 11 Of course, in this simple example, it would be
easy enough to infer the table structure. It's not hard to work out that “Name, Place
of residence, Anselm Bradford, Auckland, Paul Haine, Oxford” is a person's name fol-
lowed by a place name, but when tables get more complex (by having more rows and
columns), this becomes much more of an issue.
Note You can also use the speak-header CSS property to control whether table
header cells are read out once or always , in an aural style sheet.
Besides making the table more accessible to users of screen readers, using proper
table headers also provides sighted users with a useful visual cue as to the structure of
the table and makes life marginally easier for the web author, who doesn't have to in-
clude an extra class name for every header. In addition, this gives the designer an extra
hook for CSS and scripting.
Adding legends: caption
Now that you've headed up the table, you can make things even better by including a
table caption, in the form of the caption element. This element needs to be placed
directly after the opening table tag: