| Depr. | Empty | Version |
|---|---|---|
| No | No | HTML 4 |
| IE5.5+ | FF1+ | SA1.3+ | OP9.2+ | CH2+ |
|---|---|---|---|---|
| Partial | Partial | Partial | Partial | Partial |
Syntax
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).
It is possible
to have more than one tbody inside a
table, which you might use for the purposes of styling,
e.g.
tbody.highrisk td {background:red;font-weight:bold;}
tbody.mediumrisk td {background:orange;}
tbody.lowrisk td {background:yellow;}
…
<table>
<tbody class="highrisk">
<tr>
<td>…</td>
</tr>
</tbody>
<tbody class="mediumrisk">
<tr>
<td>…</td>
</tr>
</tbody>
<tbody class="lowrisk">
<tr>
<td>…</td>
</tr>
</tbody>
</table>
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>
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
| Internet Explorer | Firefox | Safari | Opera | Chrome | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 5.5 | 6.0 | 7.0 | 8.0 | 1.0 | 1.5 | 2.0 | 3.0 | 3.5 | 1.3 | 2.0 | 3.1 | 4.0 | 9.2 | 9.5 | 10.0 | 2.0 |
| Partial | Partial | Partial | Partial | Partial | Partial | Partial | Partial | Partial | Partial | Partial | Partial | Partial | Partial | Partial | Partial | 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 a tbody element - char
sets the character to which the contents of the tbody element should align - charoff
defines the number of characters by which cell contents will be offset from the char - valign
sets the vertical alignment of text in table cells contained inside the tbody element
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.
