th (HTML element)
| Depr. | Empty | Version |
|---|---|---|
| No | No | HTML 2 |
| IE5.5+ | FF1+ | Saf1.3+ | Op9.2+ |
|---|---|---|---|
| Full | Full | Full | Full |
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>
- Type
- table element
- Contains
- block-level elements, inline elements
- Contained by
tr
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.
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
| IE | 5.5 | Full |
|---|---|---|
| 6.0 | Full | |
| 7.0 | Full | |
| Firefox | 1.0 | Full |
| 1.5 | Full | |
| 2.0 | Full | |
| Safari | 1.3 | Full |
| 2.0 | Full | |
| 3.0 | Full | |
| Opera | 9.2 | Full |
| 9.5 | Full |
It causes no compatibility issues, and has excellent support across all tested browsers.
In this Section
- abbr
provides an abbreviated version of thethcontent - align
aligns text in cells contained insidethelement - axis
allows cell contents to be categorized - bgcolor
defines the background color of theth - char
sets the character to which cell contents should align - charoff
defines the number of characters by which cell contents will be offset from thechar - colspan
defines number of columns in table that a cell should span - headers
indicates which table headers are related to this cell - nowrap
instructs the browser not to wrap content inside the cell - rowspan
defines the number of rows in table that cell should span - scope
specifies the direction of the table cells to which the header relates - valign
aligns text vertically in table header cells - width
sets the width of thethin pixels or as a percentage
Related Reading
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.
