Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

232 CHAPTER 5 More HTML5

<td> Mazda</td>

<td>Miata</td>

</tr>

</table>

The rendered table is shown in Figure 5-13. This revised table now has horizontal and

vertical headers. Notice that the default style of the <th> element is bold.

FIGURE 5-13 he revised table with horizontal and vertical headersT

Styling the table headers

Now that you have <th> elements for the headers, add a style to the <th> elements as

follows.

th {

background-color: #BDEAFF;

width: 100px;

}

This adds a pale blue background to all the <th> elements and sets the width of all col-

umns to 100 pixels. What changes can you make to give the horizontal header and vertical

header different styles? The following example can accomplish this task.

th {

background-color: #BDEAFF;

width: 100px;

}

th:only-of-type {

background-color: #FFFF99;

}

The first style rule sets the color of all <th> elements to a pale blue and sets the width to

100 pixels. The second style rule has a higher priority, so it overrides the first style rule and

applies a pale yellow color to the vertical header.