The <tbody> HTML Element

Overview

The <tbody> element is used to enclose a set of table rows, denoted by <tr> elements. These rows collectively make up the main body of an HTML table, represented by the <table> element. The <tbody> element is a crucial part of the HTML table model, serving to organize and semantically structure the table data.

Examples and Usage

Navigating through tables on a web page can become a complex task if the data isn't structured well. This is where HTML elements like <tbody> prove invaluable, not just for developers and end-users, but also for assistive technologies that interpret web content.

<table>
  <thead>
    <tr>
      <th>Product ID</th>
      <th>Name</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>001</td>
      <td>Apple</td>
      <td>$1.20</td>
    </tr>
    <tr>
      <td>002</td>
      <td>Banana</td>
      <td>$0.80</td>
    </tr>
    <tr>
      <td>003</td>
      <td>Cherry</td>
      <td>$2.50</td>
    </tr>
  </tbody>
</table>

To style this simple table, we'll begin with the foundational CSS that affects the table as a whole.

table {
  border: 1px solid #ccc;
  border-collapse: collapse;
  font-size: 18px;
}

Here, we set the border, collapse adjacent cell borders, and establish a base font size.

th, td {
  border: 1px solid #ddd;
  padding: 4px 8px;
  text-align: left;
}

This CSS chunk targets all the cells, giving them a light gray outline and text alignment.

thead > tr > th {
  background-color: #f9f9f9;
  font-size: 20px;
  border-bottom: 2px solid #ccc;
}

Lastly, we apply additional styles to the header cells, including a background color and font size that distinguishes them from the data cells.

For more intricate tables, you can use multiple <tbody> elements to group data under different subsections.

<table>
  <thead>
    <tr>
      <th>Book ID</th>
      <th>Title</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th colspan="2">Science Fiction</th>
    </tr>
    <tr>
      <td>101</td>
      <td>Dune</td>
    </tr>
    <tr>
      <td>102</td>
      <td>Neuromancer</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="2">Fantasy</th>
    </tr>
    <tr>
      <td>201</td>
      <td>Harry Potter</td>
    </tr>
    <tr>
      <td>202</td>
      <td>The Hobbit</td>
    </tr>
  </tbody>
</table>

To style these subsections, we'll extend the previous foundational CSS with some additional rules.

tbody > tr > th {
  background-color: #f1f5f9;
  border-bottom: 1.5px solid #b5b5b5;
  font-weight: normal;
}

The additional CSS specifically styles the header cells within each <tbody>, providing a subtler background color and bottom border compared to those in the <thead>.

This way, you can easily distinguish between the main headers and the subheaders that categorize each group of rows within a <tbody>.

By understanding and implementing the <tbody> element in this manner, you make your tables more accessible and easier to manage, be it for developers, users, or assistive technologies. Naturally, these examples serve as a starting point. In real-world scenarios, tables can be far more complex, requiring nuanced combinations of table elements and their attributes for optimal accessibility and readability.

Attribute Breakdown

The <tbody> element historically permitted various attributes for controlling alignment and background color. However, most of these attributes are now considered deprecated in favor of CSS. The element also includes all global HTML attributes.

Accessibility Aspects

The <tbody> element has an implicit ARIA role of rowgroup. Detailed information on this can be found in the official specification.

Associated Elements

<table>
<td>
<tfoot>
<th>
<thead>
<tr>
<caption>
<col>
<colgroup>

Additional Notes

Deprecated attributes like align, bgcolor, char, charoff, and valign were used for alignment and background color within the associated sections of a table. Modern practices replace these with CSS properties such as text-align, background-color, and vertical-align.