Targeting Instances of the th Element

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

Figure 14.3. Screenshot of styled <th> elements.