The <tbody> tag groups the data rows in a table.
This includes all rows except header and footer rows.
With this tag the data cells can be styled from a single place.
A <tbody> tag that assigns italic text to all data cells.
| First name | Last name |
|---|---|
| Denice | Hobermann |
| Paulo | Cornell |
| Number of rows: 2 | |
<style>
table.tb { width:300px; border-collapse: collapse; }
.tb th, .tb td { border: solid 1px #777; padding: 5px; }
.tb thead { background-color:lightblue; }
.tb tbody { font-style: italic; }
</style>
<table class="tb">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
</tr>
</thead>
<tbody>
<tr>
<td>Denice</td>
<td>Hobermann</td>
</tr>
<tr>
<td>Paulo</td>
<td>Cornell</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Number of rows: 2</td>
</tr>
</tfoot>
</table>
tbody = table body
The <tbody> tag is a semantic element used to group table body rows.
This element is at the same level as <thead> and <tfoot> elements.
The <tbody> element helps assign a style to all table data rows and columns from a single place.
This <tbody> element is used to style all data cells.
The <thead> element has its own styling.
| First name | Last name |
|---|---|
| Denice | Hobermann |
| Paulo | Cornell |
<style>
table.tbl { width:300px; border-collapse: collapse; }
.tbl th, .tbl td { border: solid 1px #777; padding: 5px; }
.tbl thead { background: lightblue; }
.tbl tbody { font-style: italic; background:azure; }
</style>
<table class="tbl">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
</tr>
</thead>
<tbody>
<tr>
<td>Denice</td>
<td>Hobermann</td>
</tr>
<tr>
<td>Paulo</td>
<td>Cornell</td>
</tr>
</tbody>
</table>
The <tbody> element has no attributes, but it does accept global attributes.
The following are commonly used.
| Attribute | Value | Description |
|---|---|---|
| id | identifier | Defines a unique identifier for the tbody. |
| class | classnames | Sets one or more CSS classes to be applied to the tbody. |
| style | CSS-styles | Sets the style for the tbody. |
| data-* | value | Defines additional data that can be used by JavaScript. |
| hidden | hidden | Specifies whether the tbody is hidden. |
For additional global attributes see our global attributes list.
Do not use the attributes listed below. They are no longer valid on tbody in HTML5.
| Attribute | Description | Alternative |
|---|---|---|
align |
Aligns the content in the tbody element. | CSS text-align |
bgcolor |
Defines the background color for the tbody element. | CSS background-color |
char |
Aligns content to a character, for example "," or ".". | CSS text-align |
charoff |
Shifts column data to the right relative to char attribute. | CSS text-align |
valign |
Sets the vertical alignment of content in the tbody element. | CSS vertical-align |
For tables with many rows a scrollbar can be added to the <tbody> element.
A <tbody> element styled with a scrollbar.
| FirstName | LastName | City |
|---|---|---|
| Maria | Smith | Los Angeles |
| John | Decker | New Jersey |
| Brian | Anderson | Sao Paulo |
| Harold | Derek | Cairo |
| Paola | Howard | Paris |
| Andrea | James | Sydney |
| Kevin | Spoelstra | Mexico |
| Merci | Gasol | Florence |
| Kenny | Williams | Hong Kong |
<style>
.scroller tbody {
display: block;
max-height: 145px;
overflow-y: scroll;
background: azure;
}
.scroller thead {
background: lightblue;
}
.scroller thead,
.scroller tbody tr {
display: table;
width: 100%;
table-layout: fixed;
}
.scroller th {
text-align:left;
padding:5px;
}
.scroller td {
padding:5px;
}
</style>
<table class="scroller">
<thead>
<tr>
<th>FirstName</th>
<th>LastName</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>Maria</td>
<td>Smith</td>
<td>Los Angeles</td>
</tr>
<tr>
<td>John</td>
<td>Decker</td>
<td>New Jersey</td>
</tr>
<tr>
<td>Brian</td>
<td>Anderson</td>
<td>Sao Paulo</td>
</tr>
<tr>
<td>Harold</td>
<td>Derek</td>
<td>Cairo</td>
</tr>
<tr>
<td>Paola</td>
<td>Howard</td>
<td>Paris</td>
</tr>
<tr>
<td>Andrea</td>
<td>James</td>
<td>Sydney</td>
</tr>
<tr>
<td>Kevin</td>
<td>Spoelstra</td>
<td>Mexico</td>
</tr>
<tr>
<td>Merci</td>
<td>Gasol</td>
<td>Florence</td>
</tr>
<tr>
<td>Kenny</td>
<td>Williams</td>
<td>Hong Kong</td>
</tr>
</tbody>
</table>
The <tbody> tag is part of a group of tags
that are used to create HTML tables.
This group is referred to as the Table tag group.
Together, they allow you to create comprehensive HTML tables.
Here is a list of table tags
| Element | Description |
|---|---|
| <table> | Creates a table that contains elements listed below |
| <caption> | Creates a caption above or under a table |
| <colgroup> | Creates a container for col elements |
| <col> | Creates a style for one or more columns in a table |
| <thead> | Creates a table header that can style all header cells |
| <tbody> | Creates a table body that can style all data cells |
| <tfoot> | Creates table footer that can style all footer cells |
| <tr> | Creates a table row that contains table cells |
| <th> | Creates a table header cell |
| <td> | Creates a table data cell |
Here is when <tbody> support started for each browser:
 Chrome
|
1.0 | Sep 2008 |
 Firefox
|
1.0 | Sep 2002 |
 IE/Edge
|
1.0 | Aug 1995 |
 Opera
|
1.0 | Jan 2006 |
 Safari
|
1.0 | Jan 2003 |
