HTML <tbody> Tag

What You’ll Learn

The <tbody> tag groups the main data rows of a table. This guide covers syntax, thead/tbody/tfoot structure, CSS styling, accessibility, and best practices for beginners.

What Is the <tbody> Tag?

The <tbody> tag is an HTML element used inside <table> to define the body section of a table. It groups the main data rows, separating them from header rows in thead and summary rows in tfoot.

If you omit tbody, browsers automatically wrap rows in an implicit tbody. Writing it explicitly makes your markup clearer and easier to style.

📝 Syntax

Place tbody inside table and add tr rows with td or th cells:

<table>
  <tbody>
    <!-- Your table rows (tr) with data cells (td/th) here -->
  </tbody>
</table>

With thead Example

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>25</td>
    </tr>
  </tbody>
</table>

Syntax Rules

• tbody must be a direct child of table (along with caption, colgroup, thead, and tfoot).
• Only tr elements go directly inside tbody.
• Place thead before tbody and tfoot after tbody in source order.
• A table may contain multiple tbody elements for separate row groups.

⚖️ <thead>, <tbody>, and <tfoot>

Examples Gallery

Structured tabular data, striped body styling, and highlighted rows with copy-ready code and live previews.

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

<tbody class="striped-table">
  <tr>
    <td>John</td>
    <td>25</td>
  </tr>
</tbody>

<tbody class="highlighted-rows">
  <tr>
    <td>Alice</td>
    <td>25</td>
  </tr>
</tbody>

♿ Accessibility

• Pair tbody with thead — Header rows in thead give context to tbody data cells.
• Use th in thead — Column labels belong in thead, not mixed into tbody unless using row headers.
• Add a caption — A caption describes the whole table including its body data.
• Keep tables for data — Do not use tbody in layout tables; it confuses assistive technologies.

💡 Best Practices