A Table that Everyone Can Sit At

---

One of the reasons that tables get a bad rap is due to the accessibility problems they can cause if not carefully used. For instance, screen readers can have difficulty reading them properly, and small-screened devices are often hindered by tables when they are used for layout. But there are a few simple things we can do to increase the accessibility of a data table, while at the same time creating a lean structure that will be easy to style later on with CSS.

Let's take a look at the simple table example found in Figure 3-1, illustrating one of American baseball's longest droughts.

Figure 3-1: Example of a typical data table

Although an extremely depressing set of statistics for a Red Sox fan to look at, Figure 3-1 is a perfect example of tabular data. There are three table headers (Year, Opponent, and Season Record (W-L)) followed by the data for each of the four years presented. Above the table is a caption, defining what is contained below.

Marking up this data table is relatively straightforward, and we might do something like the following:

 <p align="center">Boston Red Sox World Series Championships</p> <table>   <tr>      <td align="center"><b>Year</b></td>      <td align="center"><b>Opponent</b></td>      <td align="center"><b>Season Record (W-L)</b></td>   </tr>   <tr>      <td>1918</td>      <td>Chicago Cubs</td>      <td>75-51</td>   </tr>   <tr>      <td>1916</td>      <td>Brooklyn Robins</td>      <td>91-63</td>   </tr>   <tr>      <td>1915</td>      <td>Philadelphia Phillies</td>      <td>101-50</td>   </tr>   <tr>      <td>1912</td>      <td>New York Giants</td>      <td>105-47</td>   </tr> </table> 

That should render close to what we see in Figure 3-1; however, there are a few improvements we can make here.

First off, we can treat the title of the table, "Boston Red Sox World Series Championships," a little more semantically correct by using the <caption> tag. The <caption> is required to immediately follow the opening <table> tag and usually holds the title and/or nature of what's contained within the table.

Visually, it will be easy for sighted people to understand what the table's purpose is, while assisting those browsing by nonvisual means as well.

Let's replace the opening paragraph and add in a proper <caption>:

 <table>   <caption>Boston Red Sox World Series Championships</caption>   <tr>      <td align="center"><b>Year</b></td>      <td align="center"><b>Opponent</b></td>      <td align="center"><b>Season Record (W-L)</b></td>   </tr>   <tr>      <td>1918</td>      <td>Chicago Cubs</td>      <td>75-51</td>   </tr>   <tr>      <td>1916</td>      <td>Brooklyn Robins</td>      <td>91-63</td>   </tr>   <tr>      <td>1915</td>      <td>Philadelphia Phillies</td>      <td>101-50</td>   </tr>   <tr>      <td>1912</td>      <td>New York Giants</td>      <td>105-47</td>   </tr> </table> 

It's important for captions to quickly convey what the data is that follows. By default, most visual browsers will place text that's contained within <caption> tags centered and just above the very top of the table. We could, of course, alter the default styling of the caption after the fact using CSS if we wished—and we'll do just that later in the "Extra credit" section of this chapter. The fact that it's now in its own unique tag makes this nice and easy.

---