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.
Search WWH ::




Custom Search