HTML and CSS Reference
In-Depth Information
Figure 7-2.
Browser output of a table with a cell spanning two rows
th
Any well-crafted spreadsheet, in addition to its cells, rows, and columns of data, has headers that describe
those cells, rows, and data. As luck would have it, HTML provides an element for marking up table
headers. The
th
element represents a table header cell. Listing 7-8 adds table headers to the same table
structure from earlier portions of this chapter.
Listing 7-8.
A table demonstrating usage of the
th
element
<table>
<tr>
<th>Product</th>
<th>Quantity</th>
</tr>
<tr>
<td>Utility Belts</td>
<td>9</td>
</tr>
<tr>
<td>Grappling Hooks</td>
<td>27</td>
</tr>
<tr>
<td>Smoke Pellets</td>
<td>623</td>
</tr>
</table>
Figure 7-3 shows what this
table
looks like in a browser.
Figure 7-3.
Browser output of a table with table column headings
By default, browsers tend to embolden header text and center it within its
th
element. We've added
column headers in this example to make it easier to understand the tabular data, clearly labeling the data
in each column. In Listing 7-9, we've added another set of headers, this time labeling the data in each row
by converting those
td
elements to
th
elements.