🚀 LEVEL UP TO SENIOR:Unlock 500+ Advanced Practical Challenges & Exercises.
🎓 COURSERA PARTNER:Earn professional Google, Meta, and IBM certificates to supercharge your resume.
REFERENCEhtml

html Documentation

LOADING ENGINE...

<tbody>

AI & DATA SCIENCE // tbody-tag

The <tbody> element groups the main body rows of a table — the actual data, as opposed to header or footer rows.

Syntax

<table>
  <thead>...</thead>
  <tbody>
    <tr><td>Row 1 data</td></tr>
    <tr><td>Row 2 data</td></tr>
  </tbody>
</table>

Deep Dive Course

**`<tbody>`** contains the primary data rows of a table, separate from `<thead>` (headers) and `<tfoot>` (summary rows). A single table can even contain **multiple `<tbody>` elements** to group logically related sets of rows (for example, transactions grouped by month), each rendered continuously but semantically separable — useful for styling or scripting distinct groups differently.

1Understanding <tbody>

`<tbody>` contains the primary data rows of a table, separate from <thead> (headers) and <tfoot> (summary rows). A single table can even contain multiple `<tbody>` elements to group logically related sets of rows (for example, transactions grouped by month), each rendered continuously but semantically separable — useful for styling or scripting distinct groups differently.

💡

If you don't explicitly write <thead>/<tbody>/<tfoot>, browsers implicitly wrap your plain <tr> rows in an anonymous <tbody> anyway — writing it explicitly just makes that structure visible and stylable in your markup.

editor.html
<table>
  <thead><tr><th>Month</th><th>Sales</th></tr></thead>
  <tbody>
    <tr><td>Jan</td><td>$5,000</td></tr>
    <tr><td>Feb</td><td>$6,200</td></tr>
  </tbody>
</table>
localhost:3000

2Practical Example

Here is a real-world application of <tbody> showing how it is used in production HTML.

editor.html
<!-- Multiple tbody groups within one table -->
<table>
  <tbody>
    <tr><td colspan="2">Q1</td></tr>
    <tr><td>Jan</td><td>$5,000</td></tr>
  </tbody>
  <tbody>
    <tr><td colspan="2">Q2</td></tr>
    <tr><td>Apr</td><td>$7,000</td></tr>
  </tbody>
</table>
localhost:3000

3Best Practices

Follow these guidelines when working with <tbody>:

1. Use <tbody> to wrap the actual data rows, separate from header/footer rows

2. Consider multiple <tbody> elements to group related row-sets within one table

3. Style <tbody> rows with CSS (e.g. zebra-striping) using :nth-child for readability

⚠️

Tip: If you don't explicitly write <thead>/<tbody>/<tfoot>, browsers implicitly wrap your plain <tr> rows in an anonymous <tbody> anyway — writing it explicitly just makes that structure visible and stylable in your markup.

editor.html
<table>
  <thead><tr><th>Month</th><th>Sales</th></tr></thead>
  <tbody>
    <tr><td>Jan</td><td>$5,000</td></tr>
    <tr><td>Feb</td><td>$6,200</td></tr>
  </tbody>
</table>
localhost:3000

Examples

Example 01Basic Usage
<table>
  <thead><tr><th>Month</th><th>Sales</th></tr></thead>
  <tbody>
    <tr><td>Jan</td><td>$5,000</td></tr>
    <tr><td>Feb</td><td>$6,200</td></tr>
  </tbody>
</table>
Example 02Advanced Example
<!-- Multiple tbody groups within one table -->
<table>
  <tbody>
    <tr><td colspan="2">Q1</td></tr>
    <tr><td>Jan</td><td>$5,000</td></tr>
  </tbody>
  <tbody>
    <tr><td colspan="2">Q2</td></tr>
    <tr><td>Apr</td><td>$7,000</td></tr>
  </tbody>
</table>

Best Practices

  • Use to wrap the actual data rows, separate from header/footer rows
  • Consider multiple elements to group related row-sets within one table
  • Style rows with CSS (e.g. zebra-striping) using :nth-child for readability

Interview Question

Why might a table use multiple <tbody> elements instead of just one?

Hint: Think about grouping related rows for styling, scripting, or visual separation.

Multiple <tbody> elements let you semantically group related sets of rows within a single table — for example, transactions grouped by quarter, or search results grouped by category — while keeping the whole thing as one <table> for layout purposes. Each <tbody> group can then be styled, hidden/shown, or manipulated with JavaScript independently, which a single flat <tbody> wouldn't allow as cleanly.

Exercises

EasyPractice using <tbody> in a real scenario.
View Solution
<table>
  <thead><tr><th>Month</th><th>Sales</th></tr></thead>
  <tbody>
    <tr><td>Jan</td><td>$5,000</td></tr>
    <tr><td>Feb</td><td>$6,200</td></tr>
  </tbody>
</table>

Frequently Asked Questions

Why might a table use multiple <tbody> elements instead of just one?

Multiple elements let you semantically group related sets of rows within a single table — for example, transactions grouped by quarter, or search results grouped by category — while keeping the whole thing as one

for layout purposes. Each group can then be styled, hidden/shown, or manipulated with JavaScript independently, which a single flat wouldn't allow as cleanly.

Related Functions

thead-tagtfoot-tagtr-tag