Recipe 8.5. Setting Styles for Table Header Elements

Problem

You want to differentiate the style of the table headers from the content in regular table cells; Figure 8-2 shows a table with traditional table headers, and Figure 8-3 shows a stylized version of the same table.

Figure 8-2. The table as it appears before styles are applied to the table headers

Figure 8-3. Styles applied to the table headers

Solution

Use the th element selector to stylize the table header:

th {  text-align: left;  padding: 1em 1.5em 0.1em 0.5em;  font-family: Arial, Helvetica, Verdana, sans-serif;  font-size: .9em;  color: white;  background-color: blue;  border-right: 2px solid blue; }

For tables with multiple rows of th elements that require different styles, use a class selector to differentiate the rows:

.secondrow th { /* Use a lighter shade of blue in the background */  background-color: #009; }

Put the appropriate rows into that class:

<tr>  <th colspan="4">  Table 1. General Demographic Characteristics  </th> </tr> <tr >  <th>     </th>  <th>   Estimate  </th>  <th>   Lower&nbsp;Bound  </th>  <th>   Upper&nbsp;Bound  </th> </tr>

Discussion

The th element characterizes the contents of the cell as header information. When setting the styles for the element, use styles that make the cell stand out from content in the table cell, td. You can generate contrasting styles by simply adjusting any of the following properties: font-family, background-color, font-size, font-weight, and text alignment. (See Recipe 2.1 for specifying fonts and Recipe 2.2 for setting font measurements and sizes.) Regardless of what you adjust, chances are you will be improving the look of the table headers.

Note that the nonbreaking space characters placed in the table headers are used so that the heading is treated by the browser as one word and therefore isn't a forced break into two lines stacked on top of each other in the heading.