Path // www.yourhtmlsource.com → Reference → <TBODY> ELEMENT

<tbody> element

by Ross Shannon

The <tbody> element groups the main data content in a table, containing one or more <tr> elements. It distinguishes the primary data rows from the header (<thead>) and footer (<tfoot>) sections. A table can have multiple tbody elements to create logical groupings of rows.

Clock This page was last updated on 2025-11-17


Syntax

The tbody element contains the main data rows and typically follows thead:

<table>
  <thead>
    <tr>
      <th>Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data row 1</td>
    </tr>
    <tr>
      <td>Data row 2</td>
    </tr>
  </tbody>
</table>

Note: If you don’t explicitly include a <tbody> element, browsers will automatically create one to wrap your table rows. However, explicitly using it is recommended for clarity and control.

Key Attributes

The tbody element has no specific attributes in modern HTML. The following obsolete attributes should be replaced with CSS:

  • align (obsolete) — Use CSS text-align instead
  • valign (obsolete) — Use CSS vertical-align instead
  • char (obsolete) — Character for alignment
  • charoff (obsolete) — Offset for character alignment

Modern styling example:

tbody tr:nth-child(odd) {
  background-color: #f9f9f9;
}

tbody tr:hover {
  background-color: #e0e0e0;
}

Examples

Basic Table Body

<table>
  <thead>
    <tr>
      <th>Item</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Coffee</td>
      <td>$3.50</td>
    </tr>
    <tr>
      <td>Tea</td>
      <td>$2.75</td>
    </tr>
    <tr>
      <td>Juice</td>
      <td>$4.00</td>
    </tr>
  </tbody>
</table>

Multiple tbody Elements

<table>
  <thead>
    <tr>
      <th>Task</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th colspan="2">High Priority</th>
    </tr>
    <tr>
      <td>Fix critical bug</td>
      <td>In Progress</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="2">Normal Priority</th>
    </tr>
    <tr>
      <td>Update documentation</td>
      <td>Pending</td>
    </tr>
    <tr>
      <td>Refactor module</td>
      <td>Not Started</td>
    </tr>
  </tbody>
</table>

Scrollable Table Body

<style>
  .scrollable-table {
    display: block;
    width: 100%;
  }
  .scrollable-table thead,
  .scrollable-table tbody {
    display: block;
  }
  .scrollable-table tbody {
    height: 200px;
    overflow-y: auto;
  }
</style>

<table class="scrollable-table">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <!-- Many rows here -->
    <tr><td>1</td><td>Item 1</td></tr>
    <tr><td>2</td><td>Item 2</td></tr>
    <!-- ... -->
  </tbody>
</table>

When to Use

Use tbody for:

  • Separating data rows from header and footer rows
  • Grouping related rows together (multiple tbody elements)
  • Creating scrollable table bodies with fixed headers
  • Applying consistent styling to data rows
  • JavaScript manipulation of table data

Benefits of using tbody:

  • Clear semantic separation of table sections
  • CSS can target body rows independently from headers/footers
  • Multiple tbody elements allow logical grouping of data
  • Improved accessibility for screen readers
  • Better control over scrolling behavior

While browsers automatically create a tbody element if omitted, explicitly including it makes your code clearer and gives you more control over table structure.

  • <table> — Table container (parent element)
  • <thead> — Table header group
  • <tfoot> — Table footer group
  • <tr> — Table row
  • <td> — Table data cell
  • <th> — Table header cell