How to Add Multiple <tbody> Elements in the Same Table

The HTML <tbody> element defines the body content of an HTML table and creates a separate semantic block in it.

A <table> can have multiple <tbody> elements, each of them specifying a row group. In this snippet, we’ll show how to add multiple <tbody> elements in the same table.

Start with creating HTML.

Create HTML

Use a <table> element and place a <thead> tag with <tr> and <th> elements inside the <table>.
Add three <tbody> elements.
Use <tr> elements with <td> elements within each <tbody> tag.

How to Add Multiple <tbody> Elements in the Same Table

<table>
  <thead>
    <tr>
      <th>Day</th>
      <th>Month</th>
      <th>Order</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1-10</td>
      <td>June</td>
      <td>20pcs</td>
    </tr>
    <tr>
      <td>11-20</td>
      <td>June</td>
      <td>20pcs</td>
    </tr>
    <tr>
      <td>21-30</td>
      <td>June</td>
      <td>20pcs</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>1-10</td>
      <td>July</td>
      <td>50pcs</td>
    </tr>
    <tr>
      <td>11-20</td>
      <td>July</td>
      <td>50pcs</td>
    </tr>
    <tr>
      <td>21-31</td>
      <td>July</td>
      <td>50pcs</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>1-10</td>
      <td>August</td>
      <td>100pcs</td>
    </tr>
    <tr>
      <td>11-20</td>
      <td>August</td>
      <td>100pcs</td>
    </tr>
    <tr>
      <td>21-31</td>
      <td>August</td>
      <td>100pcs</td>
    </tr>
  </tbody>
</table>

Add CSS

Style the <thead> <th> elements by setting the width, border-bottom, and font-weight properties.
Add the :nth-of-type(odd) pseudo-class to the <tbody> and set the background and border properties for it.
Add the :nth-of-type(even) pseudo-class to the <tbody> and set the background and border properties for it.

How to Add Multiple <tbody> Elements in the Same Table

thead th {
  width: 150px;
  border-bottom: solid 1px #000;
  font-weight: bold;
}

tbody:nth-of-type(odd) {
  background: #a8e3b6;
  border: solid 1px #000;
}

tbody:nth-of-type(even) {
  background: #c9d1cb;
  border: solid 1px #000;
}

Now, try the full example.

Example of adding multiple `<tbody>` elements in the same table:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table,
      table th,
      table td {
        border: 1px solid #cccccc;
      }
      thead th {
        width: 150px;
        border-bottom: solid 1px #000;
        font-weight: bold;
      }
      tbody:nth-of-type(odd) {
        background: #a8e3b6;
        border: solid 1px #000;
      }
      tbody:nth-of-type(even) {
        background: #c9d1cb;
        border: solid 1px #000;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>Day</th>
          <th>Month</th>
          <th>Order</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1-10</td>
          <td>June</td>
          <td>20pcs</td>
        </tr>
        <tr>
          <td>11-20</td>
          <td>June</td>
          <td>20pcs</td>
        </tr>
        <tr>
          <td>21-30</td>
          <td>June</td>
          <td>20pcs</td>
        </tr>
      </tbody>
      <tbody>
        <tr>
          <td>1-10</td>
          <td>July</td>
          <td>50pcs</td>
        </tr>
        <tr>
          <td>11-20</td>
          <td>July</td>
          <td>50pcs</td>
        </tr>
        <tr>
          <td>21-31</td>
          <td>July</td>
          <td>50pcs</td>
        </tr>
      </tbody>
      <tbody>
        <tr>
          <td>1-10</td>
          <td>August</td>
          <td>100pcs</td>
        </tr>
        <tr>
          <td>11-20</td>
          <td>August</td>
          <td>100pcs</td>
        </tr>
        <tr>
          <td>21-31</td>
          <td>August</td>
          <td>100pcs</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Try it Yourself »

Result

`<div class="demo mt-2.5 px-2.5 not-prose">`	Day	Month
1-10	June	20pcs
11-20	June	20pcs
21-30	June	20pcs
1-10	July	50pcs
11-20	July	50pcs
21-31	July	50pcs
1-10	August	100pcs
11-20	August	100pcs
21-31	August	100pcs

</div>

Create HTML

Add CSS

Example of adding multiple <tbody> elements in the same table:

Result

Example of adding multiple `<tbody>` elements in the same table: