Adding Table Headers

<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.

Figure 4-6. Adding table headers to the table.

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>

Figure 4-7. Using table headers to head up the rows within the table.

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

Figure 4-8. Table headers heading up rows and columns within the table.