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.

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

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.
<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>Jule</td>
      <td>50pcs</td>
    </tr>
    <tr>
      <td>11-20</td>
      <td>Jule</td>
      <td>50pcs</td>
    </tr>
    <tr>
      <td>21-31</td>
      <td>Jule</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 elements of the by specifying the width, border-bottom, and font-weight properties.
  • Add the :nth-child(odd) pseudo-class to the <tbody> and set the background and border properties for it.
  • Add the :nth-child(even) pseudo-class to the <tbody> and set the background and border properties for it.
thead th {
  width: 150px;
  border-bottom: solid 1px #000;
  font-weight: bold;
}

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

tbody:nth-child(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-child(odd) {
        background: #a8e3b6;
        border: solid 1px #000;
      }
      tbody:nth-child(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>Jule</td>
          <td>50pcs</td>
        </tr>
        <tr>
          <td>11-20</td>
          <td>Jule</td>
          <td>50pcs</td>
        </tr>
        <tr>
          <td>21-31</td>
          <td>Jule</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>

Result

Day Month Order
1-10 June 20pcs
11-20 June 20pcs
21-30 June 20pcs
1-10 Jule 50pcs
11-20 Jule 50pcs
21-31 Jule 50pcs
1-10 August 100pcs
11-20 August 100pcs
21-31 August 100pcs