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