HTML / Element

How to Use the tbody Element

The tbody element groups the rows in the main part of a table. It helps show which rows hold the table's information, especially when the table also has heading or total rows.

The short answer

Use tbody to group the table's body rows. Put each row in a tr, then put heading cells (th) or data cells (td) inside that row.

tbody describes how rows belong together. Use CSS for visual changes such as spacing or color.

A small example

<table>
  <caption>Fruit in stock</caption>
  <thead>
    <tr><th scope="col">Item</th><th scope="col">Count</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">Apples</th><td>3</td></tr>
    <tr><th scope="row">Pears</th><td>2</td></tr>
  </tbody>
  <tfoot>
    <tr><th scope="row">Total</th><td>5</td></tr>
  </tfoot>
</table>

Fruit in stock
Item	Count
Apples	3
Pears	2
Total	5

thead holds the column headings, tbody holds the main rows, and tfoot can hold a total or summary. The browser displays their rows as parts of one table.

Split rows into groups

You can use more than one tbody when the main rows belong to different groups, such as kinds of food or months. For example, one tbody can hold fruit rows and another can hold vegetable rows.

The standard calls each such set a “row group.” A cell with rowspan="0" extends to the last row in its own row group. It does not extend into the next tbody.

What you write and what the browser builds

If you write a tr directly inside table, the browser adds a tbody while it turns the HTML into the DOM, the page structure that JavaScript can read. The source and the DOM can therefore have different parent-child relationships.

<table>
  <tr><td>Apples</td></tr>
</table>

// Parent-child relationships in the DOM
table → tbody → tr → td

When you write new HTML, add tbody yourself so the table's structure is clear and does not depend on browser recovery.

Common mistakes

Putting td or th directly inside tbody. Cells go inside a tr.
Splitting tbody elements only to change how the table looks. Split them when the rows form meaningful groups.
Thinking tbody is a heading shown to the reader. Use a table caption or heading cells when the table needs a name or headings.

For the whole table, see How to Use the table Element.
For its heading rows, see How to Use the thead Element.
For total or summary rows, see How to Use the tfoot Element.
For table rows, see the tr Element.
For heading and data cells, see th and td.
For tbody details and browser observations, see tbody in Yugien Atlas.