HTML <tbody> tag

Definition and Usage

<tbody> tag is used to group the main content of the HTML table.

<tbody> elements with <thead> and </tfoot> elements combined to specify each part (body, header, footer) of the table.

Browsers can use these elements to make the header and footer visible independently when scrolling through the table body. Moreover, when printing large tables that span multiple pages, these elements can make the header and footer of the table print at the top and bottom of each page.

Note:<tbody> An element must contain one or more <tr> tag.

<tbody> The tag must be used in the following context: as a <table> The child elements of the element, in any <caption>,<colgroup> and <thead> after the element.

Tip:By default, <thead>, <tbody>, and <tfoot> elements do not affect the table layout. However, you can use CSS to set the styles of these elements (see the examples below)!

Instance

Example 1

HTML table containing <thead>, <tbody>, and <tfoot> elements:

<table>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>February</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  </tfoot>
    <tr>
      <td>Total</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Try It Yourself

Example 2

Use CSS to set the styles of <thead>, <tbody>, and <tfoot>:

<html>
<head>
<style>
thead {color: green;}
tbody {color: blue;}
tfoot {color: red;}
table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>
<table>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>February</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  </tfoot>
    <tr>
      <td>Total</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Try It Yourself

Example 3

How to align <tbody> The content (using CSS):

<table style="width:100%">
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody style="text-align:right">
    <tr>
      <td>January</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>February</td>
      <td>￥4500</td>
    </tr>
  </tbody>
</table>

Try It Yourself

Example 4

How to vertically align <tbody> The content (using CSS):

<table style="width:50%;">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tbody style="vertical-align:bottom">
    <tr style="height:100px">
      <td>January</td>
      <td>￥3400</td>
    </tr>
    <tr style="height:100px">
      <td>February</td>
      <td>￥4500</td>
    </tr>
  </tbody>
</table>

Try It Yourself

Global Attributes

<tbody> The tag also supports Global Attributes in HTML.

Event Attributes

<tbody> The tag also supports Event Attributes in HTML.

Default CSS Settings

Most browsers will display the following default values <tbody> Element:

tbody {
  display: table-row-group;
  vertical-align: middle;
  border-color: inherit;
}

Browser Support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support