th (HTML element)
| Depr. | Empty | Version |
|---|---|---|
| No | No | HTML 2 |
| IE5.5+ | FF1+ | SA1.3+ | OP9.2+ |
|---|---|---|---|
| Full | Full | Full | Full |
Syntax
Description
You
can use two kinds of table cells: the td can be used for any kind of data, while the
th element is reserved for cells that contain header
information. Despite the word “head,” this element isn’t used exclusively
for a table heading that appears at the top of a table; it can
equally be applied to any other cell in a table.
The
th element renders the text content it contains
slightly differently from the td—in the case of the
browsers tested, the rendered style makes the font bold and centered (and
this convention is unlikely to change soon). Centered headings are not
always desirable, though, and you can use the align
attribute to override this (or better still, use CSS to change the
alignment).
As a structural element which
conveys some orientation information about the data that may follow, the
th has some special attributes that reinforce the
relationship between header and data cells, namely the axis, headers, id, and scope attributes.
Finally, this element uses the colspan and
rowspan attributes when the content of the cell
needs to run across multiple columns or rows.
Example
This
th defines the two cells in the first row as table
headers:
<table summary="Interest Rates" width="400" border="1">
<caption>Interest Rates</caption>
<tr>
<th>Account Type</th>
<th>Interest Rate (%)</th>
</tr>
<tr>
<td>Smart</td>
<td>From 2%</td>
</tr>
<tr>
<td>Young Saver</td>
<td>From 1.6%</td>
</tr>
</table>
Use This For …
This element is used to identify a table cell whose content is a header of some kind; for example, you might use it to identify the top-most cell, containing the words “Make of Car,” in a column that contains a list of car manufacturers.
Compatibility
| Internet Explorer | Firefox | Safari | Opera | |||||||
|---|---|---|---|---|---|---|---|---|---|---|
| 5.5 | 6.0 | 7.0 | 1.0 | 1.5 | 2.0 | 1.3 | 2.0 | 3.0 | 9.2 | 9.5 |
| Full | Full | Full | Full | Full | Full | Full | Full | Full | Full | Full |
It causes no compatibility issues, and has excellent support across all tested browsers.
In this Section
abbr
provides an abbreviated version of thethcontentalign
aligns text in cells contained insidethelementaxis
allows cell contents to be categorizedbgcolor
defines the background color of thethchar
sets the character to which cell contents should aligncharoff
defines the number of characters by which cell contents will be offset from thecharcolspan
defines number of columns in table that a cell should spanheaders
indicates which table headers are related to this cellnowrap
instructs the browser not to wrap content inside the cellrowspan
defines the number of rows in table that cell should spanscope
specifies the direction of the table cells to which the header relatesvalign
aligns text vertically in table header cellswidth
sets the width of thethin pixels or as a percentage
User-contributed notes
There are no comments yet.
Add a note
To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.