tbody (HTML element)
| Depr. | Empty | Version |
|---|---|---|
| No | No | HTML 4 |
| IE5.5+ | FF1+ | Saf1.3+ | Op9.2+ |
|---|---|---|---|
| Partial | Partial | Partial | Partial |
Example
This tbody
element wraps around the two rows containing the table
data:
<table summary="Interest Rates">
<caption>Interest Rates</caption>
<thead>
<tr>
<th>Account Type</th>
<th>Interest Rate</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smart</td>
<td>From 2%</td>
</tr>
<tr>
<td>Young Saver</td>
<td>From 1.6%</td>
</tr>
</tbody>
</table>
- Type
- table element
- Contains
trelements only- Contained by
tableonly
Description
Just as you can logically group
all the header content in a table using thead, you can
do the same for the main body of the table data using
tbody (tbody is a shortening of
table body). By default, a tbody will
not affect the display of the table in any way. However, you may use this
element to affect the table’s display via CSS (for example, you may choose
to set the height of the tbody
area to a fixed amount, and let the content in that area scroll, so that
the table’s header and footer sections remain visible on screen even when
the main bulk of the table content is quite lengthy).
Use This For …
This element is used to group
the bulk of the table’s content (that is, anything other than the headers,
which are contained in the thead, and the footer area,
which is contained by tfoot).
Compatibility
| IE | 5.5 | Partial |
|---|---|---|
| 6.0 | Partial | |
| 7.0 | Partial | |
| Firefox | 1.0 | Partial |
| 1.5 | Partial | |
| 2.0 | Partial | |
| Safari | 1.3 | Partial |
| 2.0 | Partial | |
| 3.0 | Partial | |
| Opera | 9.2 | Partial |
| 9.5 | Partial |
By itself—with none
of the element-specific attributes detailed below applied—the presence of
a tbody makes no visual difference to the
table. For a true indication of compatibility issues,
refer to each individual attribute to see what works and what
fails.
In this Section
- align
aligns text in table cells contained inside atbodyelement - char
sets the character to which the contents of thetbodyelement should align - charoff
defines the number of characters by which cell contents will be offset from thechar - valign
sets the vertical alignment of text in table cells contained inside thetbodyelement
User-contributed notes
- ID:
- #2
- Date:
- Fri, 18 Apr 2008 05:03:36 GMT
If you're doing any sort of DOM manipulation using Javascript on a table, it's a good practice to explicitly define a <tbody>, otherwise some browsers may give unexpected results when manipulating nodes.
- ID:
- #1
- Date:
- Fri, 28 Mar 2008 12:52:48 GMT
A table can contain more than one TBODY element. Otherwise scope="rowgroup" for TH elements would be fairly useless.
You can also use multiple TBODY elements to provide different styling via CSS. For instance,
tbody tr:first-child td {border-top:3px double #999}
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.
