HTML <tbody> Tag

The <tbody> tag groups the rows that make up the body of a table. The body includes all rows except the header and footer rows. With this tag you can assign a style to all data cells from a single place.

HTML Tag

Example

#

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

Using <tbody>

The <tbody> tag is a semantic element used to group table body rows.

This element can be used together with the <thead> and <tfoot> elements.

The <tbody> element is useful to assign a style to all table data rows and columns from a single place.

More Examples

A <tbody> element that quickly styles 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>

Attributes for <tbody>

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.


Obsolete Attributes

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

Did you know?

Did you know?

Adding a scrollbar to <tbody>

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>

Table Tags

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, these tags 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

Browser support

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

You may also like

Guides