HTML Tags

HTML <tbody> Tag

The <tbody> tag in HTML is used to group the main content rows (body) of a table.
It separates the table’s data section from the header (<thead>) and footer (<tfoot>), helping improve structure, readability, and performance for large datasets.

Syntax

html

<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
    </tr>
  </tbody>
</table>

Attributes

Attribute	Description
(None)	The `<tbody>` element has no specific attributes. You can use global attributes such as id, class, or style.

Example

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tbody Tag Example</title>
  <style>
    table {
      border-collapse: collapse;
      width: 70%;
      margin: 20px auto;
      text-align: center;
    }
    thead {
      background-color: #29AB87;
      color: white;
    }
    tbody tr:nth-child(even) {
      background-color: #f9f9f9;
    }
    th, td {
      border: 1px solid #555;
      padding: 10px;
    }
  </style>
</head>
<body>

  <h2>HTML Table with Tbody Example</h2>

  <table>
    <thead>
      <tr>
        <th>Country</th>
        <th>Capital</th>
        <th>Population (Millions)</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>India</td>
        <td>New Delhi</td>
        <td>1428</td>
      </tr>
      <tr>
        <td>USA</td>
        <td>Washington, D.C.</td>
        <td>332</td>
      </tr>
      <tr>
        <td>Japan</td>
        <td>Tokyo</td>
        <td>125</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

Output

Browser Output

html

Displays a table with a distinct header (green) and alternating row colors in the tbody section.
Please use our TryIt editor to view and experiment with the table.

Browser Support

Chrome	Edge	Firefox	Safari	Opera	IE9+
Yes	Yes	Yes	Yes	Yes	Yes

All modern browsers fully support the <tbody> element.

Notes

The <tbody> tag is optional if the table only contains one set of rows, but browsers insert it automatically in the DOM.
It allows styling the main data section separately from the header and footer.
Helps with table accessibility, scrolling, and printing optimization.
Best practice: always include <thead>, <tbody>, and <tfoot> for semantic structure.

Conclusion

The <tbody> tag defines the core content section of a table, enhancing clarity and control over how data rows are displayed and styled.
It’s an essential element for managing and presenting tabular information efficiently.

PreviousHTML <thead> Tag NextHTML <tfoot> Tag