HTML Table Row Groups

Understanding HTML Table Row Groups

HTML tables can organize related rows into header, body, and footer sections using the <thead>, <tbody>, and <tfoot> elements.

These elements give a table additional structure by grouping rows according to their purpose rather than leaving every <tr> directly inside the <table> element.

Table Row Group Syntax

Row groups contain one or more <tr> elements and divide the table into logical sections.

<table>
  <thead>
    <tr>
      <th>Course</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>HTML</td>
      <td>Completed</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Courses</td>
      <td>1</td>
    </tr>
  </tfoot>
</table>

The three elements have different purposes: <thead> groups header rows, <tbody> groups the main data rows, and <tfoot> groups footer or summary rows.

The <thead> Element

The <thead> element groups the rows that provide column headings or other introductory information for the table.

<thead>
  <tr>
    <th scope="col">Course</th>
    <th scope="col">Level</th>
    <th scope="col">Status</th>
  </tr>
</thead>

A table can have only one <thead> element, although that element may contain more than one row.

The <tbody> Element

The <tbody> element groups the rows containing the main body of the table's data.

<tbody>
  <tr>
    <td>HTML</td>
    <td>Beginner</td>
    <td>Completed</td>
  </tr>
  <tr>
    <td>CSS</td>
    <td>Beginner</td>
    <td>In Progress</td>
  </tr>
</tbody>

Browsers may automatically create a <tbody> in the document structure when table rows are written without an explicit row group. Writing it in the HTML makes the intended table structure clear.

The <tfoot> Element

The <tfoot> element groups rows that summarize or conclude the table, such as totals, averages, or other final information.

<tfoot>
  <tr>
    <th scope="row">Total Students</th>
    <td>48</td>
  </tr>
</tfoot>

A table can have only one <tfoot> element, and it normally appears after the table's <tbody> elements in the HTML source.

Multiple <tbody> Elements

Unlike <thead> and <tfoot>, a table can contain more than one <tbody> element. Multiple body groups are useful when the table contains separate sets of related data.

<tbody>
  <tr>
    <th scope="row">HTML</th>
    <td>Beginner</td>
  </tr>
</tbody>
<tbody>
  <tr>
    <th scope="row">JavaScript</th>
    <td>Intermediate</td>
  </tr>
</tbody>

Each <tbody> creates a separate row group, allowing related rows to be organized together within the same table.

Complete Row Group Structure

A structured table can combine a caption with header, body, and footer row groups to clearly describe the purpose of each part of the table.

<table>
  <caption>Course Enrollment</caption>
  <thead>
    <tr>
      <th scope="col">Course</th>
      <th scope="col">Students</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">HTML</th>
      <td>25</td>
    </tr>
    <tr>
      <th scope="row">CSS</th>
      <td>23</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Total</th>
      <td>48</td>
    </tr>
  </tfoot>
</table>

Not every table needs all three row groups. Use the elements that accurately describe the structure of the data rather than adding them simply because they are available.

Row Groups and Accessibility

Row groups provide structural information that can help browsers and assistive technologies interpret more complicated tables. They can also support header relationships when a header applies to an entire group of rows.

For example, scope="rowgroup" can be used on an appropriate <th> element when that header describes multiple rows within a row group. The Accessible Tables tutorial covers these relationships in greater detail.

Table Row Group Example

The following example separates a table into <thead>, <tbody>, and <tfoot> sections. Add another row to the body or move a row between groups to explore how the table is structured.

Table Row Group Best Practices

• Use <thead> to group rows that contain the table's column headings or introductory information.
• Use <tbody> to group the main rows of table data.
• Use <tfoot> for rows containing totals, summaries, or other concluding information.
• Use multiple <tbody> elements when the table contains distinct groups of related rows.
• Keep <caption> as the first child of the table when a caption is included.
• Use row groups according to the meaning of the data rather than for visual styling alone.
• Use CSS to control the appearance of different table sections.

Summary

The <thead>, <tbody>, and <tfoot> elements organize table rows into logical header, body, and footer groups. These elements make table structure clearer, allow related rows to be grouped together, and provide useful structure for styling and accessibility.