The <tbody> tag groups the body rows of a table. Use <thead> for header rows, <tbody> for data rows, <tfoot> for footer. Order: caption, thead, tbody, tfoot. If you omit <tbody>, the browser creates an implicit one.

<tbody>

Example: <table><thead><tr><th>Name</th></tr></thead><tbody><tr><td>Alice</td></tr></tbody></table>. <tbody> contains one or more <tr> with <td> cells. You can have multiple <tbody> to group rows.

<table>
  <thead><tr><th>Name</th></tr></thead>
  <tbody><tr><td>Alice</td></tr></tbody>
</table>

Semantics: thead = header, tbody = body data, tfoot = footer. Using them improves accessibility and styling. Screen readers use this structure. Always put tbody after thead and before tfoot.

<table>
  <thead><tr><th>Col</th></tr></thead>
  <tbody><tr><td>Data</td></tr></tbody>
</table>

In the browser, thead rows and tbody rows render together. Styling can target tbody tr for zebra stripes or hover. Prefer explicit thead/tbody for clarity.

<table><thead><tr><th>Name</th></tr></thead><tbody><tr><td>Alice</td></tr></tbody></table>

Checkpoint: Which element wraps the body (data) rows of a table?

<tbody>

Correct! <tbody> wraps body rows; <thead> wraps header rows. Use both for clear structure and accessibility.

<tbody><tr><td>Data</td></tr></tbody>

You now know tbody structure. Complete the challenges below to master the <tbody> tag!

tbody.html

1 / 7

📋

Tutor:The <tbody> tag groups the body rows of a table. Use <thead> for header rows, <tbody> for data rows, <tfoot> for footer. Order: caption, thead, tbody, tfoot. If you omit <tbody>, the browser creates an implicit one.

⭐ 0 EXP

Tbody Mastery

Group body rows with <tbody> inside tables.

Concept 1: The tbody Tag

The <tbody> tag groups the body (data) rows of a table. <thead> is for header rows, <tbody> for data rows, <tfoot> for footer. Order: thead, tbody, tfoot.

System Check

Which element wraps the body (data) rows of a table?

Community Holo-Net

Table structure patterns

Using thead, tbody, tfoot? Share your snippets.

Enjoying this guide?

Codesyllabus is 100% free and open-source. Support our mission, pay for server infrastructure, and fuel new tutorials by buying us a coffee!

HTML <tbody> Tag

Pascual Vila

Frontend Instructor.

The <tbody> tag groups the body (data) rows of a table. Use <thead> for header rows, <tbody> for data rows, <tfoot> for footer. Order inside <table>: <caption>, <thead>, <tbody>, <tfoot>. If you omit <tbody>, the browser creates an implicit one.

Structure

<tbody> contains one or more <tr> with <td> cells. You can have multiple <tbody> elements to group rows (e.g. by category). Improves semantics and styling (e.g. zebra stripes on tbody tr).

Best practices

Prefer explicit <thead> and <tbody> for clarity and accessibility. Screen readers use this structure. Always place <tbody> after <thead> and before <tfoot>.

Tbody Tag Glossary

<tbody>: Groups the body (data) rows of a table. Contains <tr> with <td> cells. Place after <thead>, before <tfoot>.
<thead> / <tfoot>: <thead> = header rows. <tfoot> = footer rows. Order: thead, tbody, tfoot. Using all three improves semantics and a11y.
Implicit tbody: If you don't write <tbody>, the browser wraps your <tr> in an implicit tbody. Explicit is better for structure and CSS.

📖 INDEX