tbody (HTML element)

Spec
Depr. Empty Version
No No HTML 4
Browser support (more…)
IE5.5+ FF1+ SA1.3+ OP9.2+ CH2+
Partial Partial Partial Partial Partial

Syntax

<tbody>
</tbody>

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

User-contributed notes

ID:
#2
Contributed:
by chris_fuel
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.

Related Products