The Head(s) of the Table

---

Table headers are important to make use of when building data tables. Instead of using a presentational tag like <b> to visually cue the user that the cell is of importance in grouping the data that follows, we can take advantage of the <th> tag, much like we used proper heading tags for section page content in Chapter 2.

Visual browsers might render information contained in <th> tags as bold and centered by default, but again we can use the uniqueness of the <th> tag to style these important cells differently from the rest of the table data that's contained in a <td>.

In addition to their presentational advantages, using <th> tags can be beneficial to nonvisual browsers as well—as we'll dive into further on.

The headers in our example table are found in the top row: Year, Opponent, and Season Record (W-L). Let's replace our previous, presentational markup with proper headers:

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

Using <th> tags to mark up the header cells will give us the same visual results shown in Figure 3-1. Let's review why this is a preferred way:

• We eliminate the need for extra presentational markup to differentiate the header cells from normal ones.

• By default, most visual browsers will render text within <th> tags bold and centered—making it easier to see the difference between headers and data.

• Because of their uniqueness from normal <td> tags, we can later style table headers differently from other cells in the table.

There is also an additional reason for using table headers that we'll discuss next.

---