HTML `<tbody>` Element: Structuring Table Data for Enhanced Readability and Accessibility

Learn how to use the HTML `<tbody>` element to structure the body content of your tables, separating it from the header and footer for improved organization, independent scrolling, and better accessibility for users and assistive technologies.



Understanding the HTML <tbody> Element

What is the <tbody> Element?

The HTML <tbody> element specifies the body of an HTML table. It's a container for the table's data rows (<tr> elements). Browsers use this element to enable independent scrolling of the table's body, separating it from the header (<thead>) and footer (<tfoot>) sections. This is particularly helpful for large tables that might span multiple pages when printed.

Example:

HTML

<table>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
</table>

Using <tbody>

  • The <tbody> element must contain one or more <tr> (table row) elements.
  • It should be placed within the <table> element, after any <thead> and <tfoot> elements.
  • While <tbody>, <thead>, and <tfoot> don't affect layout by default, you can style them with CSS.

Browser Support

The <tbody> element is widely supported by all major browsers.

Styling <tbody> with CSS

You can use CSS to style the <tbody> element, for example, to control alignment and borders. This allows you to customize the visual presentation of your table data.

Example:

CSS

tbody {
  border-collapse: collapse;
  border: 1px solid black;
}

tbody td {
  border: 1px solid black;
  padding: 8px;
  text-align: center;
}