The HTML <tbody> tag
In short
The HTML <tbody> element groups the body rows (the data) of a <table>. A table can have several <tbody> sections to group related rows.
Overview
The <tbody> element contains the data rows of a table, keeping them distinct from the <thead> and <tfoot> sections. If you do not write one, the browser adds it implicitly, so it is always there in the rendered table.
A table may contain multiple <tbody> elements, which is a handy way to group rows into logical sections (quarters in a financial table, categories in a price list), each of which you can style or script independently.
Syntax
<tbody>
<tr><td>Mug</td><td>$12</td></tr>
</tbody>Example
<style>table{border-collapse:collapse}th,td{border:1px solid #cbd5e1;padding:6px 10px}</style>
<table>
<thead><tr><th>Item</th></tr></thead>
<tbody><tr><td>One</td></tr><tr><td>Two</td></tr></tbody>
</table>Best practices
- Wrap the data rows in
<tbody>to separate them from the header and footer. - Use multiple
<tbody>elements to group rows into logical sections. - Target a specific
<tbody>with CSS or JavaScript to style or update a section. - Remember the browser inserts an implicit
<tbody>even if you omit it.
Frequently asked questions
What is the tbody element?
Can a table have multiple tbody elements?
Yes. Multiple
<tbody> sections let you group rows logically and style or script each independently.Is tbody required?
Not in your markup (the browser adds an implicit one), but writing it makes the structure explicit.
What is the difference between tbody and thead?
<thead> holds the header rows;
<tbody> holds the data rows.
