Header and Data Relationships

---

To make things a bit more organized for people using a screen reader to read the information from our table, we can utilize the headers attribute to associate header cells with the corresponding data found in <td> tags. Doing this will allow the screen reader to read the header and data information in a more logical order, rather than strictly reading each row left to right as it normally might.

Let's again use our Red Sox table as an example on how to achieve this. First, we'll need to add a unique id to each <th> in our table. We can then add the headers attribute to each data cell to match the two up accordingly.

Adding the id to each header is as simple as this:

 <table summary="This table is a chart of all Boston Red Sox World Series wins.">   <caption>Boston Red Sox World Series Championships</caption>   <tr>      <th >Year</th>      <th >Opponent</th>      <th >Season  Record (W-L)</th>   </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> 

We've used short, descriptive names for each header id. Now we can add the appropriate headers attribute to each data cell—with its value corresponding to the id that it's associated with.

 <table summary="This table is a chart of all Boston Red Sox World Series wins.">   <caption>Boston Red Sox World Series Championships</caption>   <tr>      <th >Year</th>      <th >Opponent</th>      <th >Season  Record (W-L)</th>   </tr>   <tr>      <td headers="year">1918</td>      <td headers="opponent">Chicago Cubs</td>      <td headers="record">75-51</td>   </tr>   <tr>      <td headers="year">1916</td>      <td headers="opponent">Brooklyn Robins</td>      <td headers="record">91-63</td>   </tr>   <tr>      <td headers="year">1915</td>      <td headers="opponent">Philadelphia Phillies</td>      <td headers="record">101-50</td>   </tr>   <tr>      <td headers="year">1912</td>      <td headers="opponent">New York Giants</td>      <td headers="record">105-47</td>   </tr> </table> 

When we create relationships between our header and data information, a screen reader might read this table as follows: "Year: 1918, Opponent: Chicago Cubs, Season Record (W-L): 75-51," and so on for each table row. This makes a little more sense than hearing each row read left to right.

It also doesn't hurt for us to have those unique ids for each <th> in our table. We could later take advantage of that identification with exclusive CSS rules. And we'll do just that in the "Extra credit" section later in this chapter.

---