HTML <tbody> Tag

❮ Previous Next ❯

The <tbody> tag in HTML is employed to gather the main content within a table.

The <tbody> part works with <thead> and <tfoot> to define different sections of a table, such as the body, header, and footer.

Web browsers can utilize these elements to allow scrolling of the table body separately from the header and footer. Additionally, when printing a lengthy table that extends across multiple pages, these elements can ensure that the table header and footer are printed at the top and bottom of each page.

Note: The <tbody> part needs to contain at least one <tr> section.

The <tbody> tag should be used in this way: It should come after a <table> element, and after any <caption>, <colgroup>, and <thead> elements.

Tip: The <thead>, <tbody>, and <tfoot> elements won't change how the table looks at first. But you can make them look different using CSS (check out the example below)!

<!DOCTYPE html>
<html>
  <head>
    <style>
      table,
      th,
      td {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <h1>The thead, tbody, and tfoot elements</h1>
    <table>
      <thead>
        <tr>
          <th>Month</th>
          <th>Savings</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>January</td>
          <td>$100</td>
        </tr>
        <tr>
          <td>February</td>
          <td>$80</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>Sum</td>
          <td>$180</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

❮ Previous Next ❯

HTML Basics

HTML Tags

HTML Attributes

HTML Graphics

HTML APIs

HTML DOM

HTML Audio/Video

HTML 5 MathML

HTML <tbody> Tag

Web Development