Table of Contents
INTRODUCTION
In HTML, <tbody> is used to group the main content of a table—typically the rows containing actual data. This element should come after any <caption>, <colgroup>, and <thead> elements.
You can use multiple <tbody> elements within a table, as long as they appear consecutively. This helps organize large tables by dividing rows into sections, allowing each section to be formatted independently if needed (e.g., you can style the body differently using CSS).
The tbody, along with thead and tfoot element, helps give semantic meaning to parts of a table. It's useful for showing tables on screens or in print, and it also helps screen readers and search engines understand the table better."
Example:
<table>
<thead>
<tr>
<th>Fruit</td>
<th>Price</td>
<th>Quantity</td>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>$1</td>
<td>50</td>
</tr>
<tr>
<td>Banana</td>
<td>$0.5</td>
<td>100</td>
</tr>
</tbody>
</table>
Fruit | Price | Quantity |
---|---|---|
Apple | $1 | 50 |
Banana | $0.5 | 100 |
Attributes
The <tbody> element only has global Attributes.
Deprecated Attributes
The following attribute are Deprecated and is advised to not use them. They are mentioned just for reference for updating legacy code or for historical interest.
- align
- bgcolor
- char
- charoff
- valign
Tag Omission
Start Tag - You can skip writing the <tbody> start tag if the first thing inside it is a <tr> (table row).
End Tag - You can skip the </tbody> end tag if it's right before another <tbody> or <tfoot> tag.
Permitted parents
The permitted parent of <tbody> element is <table> element.
Usage Notes
- The <tbody> element should come after any <caption> or <colgroup> elements, and before <thead> elements.
- When you put <tr> rows directly inside a <table>, the browser adds a <tbody> around them automatically. So if you're using CSS like table > tr, it won't work because the rows are now inside <tbody>.
- you can use more than one tbody element in a table, as long as they are placed one after another."
- When you print a long table that goes over many pages, the thead and tfoot usually stay the same on each page, but the tbody shows different rows on each page.
- If a table is too big to fit on the screen, the browser might let you scroll parts of it—like the header, body, footer, or caption—separately, so you can still see important sections while scrolling through the rest.