Sams Teach Yourself CSS in 10 Minutes

Targeting Instances of the <th> Element

The next step is to create background colors for the <th> element. Using descendant selectors, it is possible to apply different colors to the <th> elements on the top and left side of the table.

The <th> elements across the top of the table are styled with thead th {...} because they appear inside the <thead> element.

The <th> elements down the side of the table are styled with tbody th {...} because they appear inside the <tbody> element.

The <th> elements down the side also can be set to font-weight: normal to differentiate them from the headers across the top as shown in Listing 14.13. The results can be seen in Figure 14.3.

Listing 14.13. CSS Code for Styling the <th> Elements

caption { text-align: left; margin: 0 0 .5em 0; font-weight: bold; } table { border-collapse: collapse; } th, td { border-right: 1px solid #fff; border-bottom: 1px solid #fff; padding: .5em; } tr { background: #B0C4D7; } thead th { background: #036; color: #fff; } tbody th { font-weight: normal; background: #658CB1; }