HTML and CSS [Electronic resources]

Adding Table Headers

A table header denotes the header of a column or row within a table.

<th>
</th>

To have your headers describe the column beneath them, place all the headers in a row, and place the columns that will appear underneath in subsequent rows (see Example 4-5).

Example 4-5. Table headers for table cells

<table width="90%" border="1" cellspacing="5" cellpadding="5">
<tr>
<th>Location</th>
<th>Weather</th>
<th>Time Zone</th>
</tr>
<tr>
<td>Tucson, Arizona</td>
<td>Warm to Hot</td>
<td>No Daylight Savings</td>
</tr>
</table>

By default, the browser renders table headers in bold type. As you can see in Figure 4-6, the header text is centered. You can, of course, modify the header weight, color, and other styles using CSS.

You can also use table headers to describe the row headers (see Example 4-6). The table header then appears within the row (see Figure 4-7).

Example 4-6. Table headers for table cells

<table width="90%" border="1" cellspacing="5" cellpadding="5">
<tr>
<th>Location</th>
<td>Tucson, Arizona</td>
</tr>
<tr>
<th>Weather</th>
<td>Warm to Hot</td>
</tr>
<tr>
<th>Time Zone</th>
<td>No Daylight Savings</td>
</tr>
</table>

Many data tables require headers for columns and rows, so you can combine the technique as needed (see Figure 4-8).