Can I have multiple thead and tbody inside a single table in HTML5?

Question

I wanted to make a table of this, but I can only have a table tag and I wanted to know if it is semantically right to put several thead and tbody within a single table.

Answer 1

Syntactically it is likely that anything is possible, but semantically zero or one is allowed thead and zero or several tbody.

console.log(document.querySelectorAll("table tbody").length)

table {
  border-collapse: collapse;
}

table, th, td {
  border: 1px solid black;
  padding: 5px 10px;
}

<table>
<thead>
  <tr>
    <th>Coluna 1</th>
    <th>Coluna 2</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Valor 1</td>
    <td>Valor 2</td>
  </tr>
  <tr>
    <td>Valor 3</td>
    <td>Valor 4</td>
  </tr>
</tbody>
<tbody>
  <tr>
    <td>Valor A</td>
    <td>Valor B</td>
  </tr>
  <tr>
    <td>Valor C</td>
    <td>Valor D</td>
  </tr>
</tbody>
</table>

Citing the MDN (source)

Permitted content (in this order)

• an element <caption> optional ,
• zero or more elements <colgroup>,
• an element <thead> optional,
• any of the following:
  • zero or more elements <tbody>
  • one or more elements <tr>
• an element <tfoot> optional

Answer 2

Short answer, yes can, even you can have an entire table inside the other, which is called Nesting Tables and the code would be like this

  <table border="1" style="text-align: center; width: 300px">
    <thead>
      <tr>
        <th colspan="2">thead</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">row</th>
        <td>item row</td>
      </tr>
      <tr>
        <td colspan="2">

          <table border="1" style="width: 100%">
            <tbody>
              <tr>
                <th scope="col">col</th>
              </tr>
              <tr>
                <td>item col</td>
              </tr>
            </tbody>
          </table>

        </td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th colspan="2">tfoot</th>
      </tr>
    </tfoot>
  </table>

Most table elements are optional, minus the <tbody>, even in Chrome you can do a simple test, create a table and do not use the <tbody> and when inspecting the table you will see that the Browser itself will put the tag for you :)

In short you must have at least 1 tbody, or as many as you like. Even the W3C’s own official HTML validator does not error when using multiple tbody

About table week Mozilla has a unique documentation for this https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Advanced

Including vc will see that it uses some specific attributes of the table elements to give semantics to the code as scope, rowgroup, colgroup and id + header together as in the example below

<thead>
  <tr>
    <th id="purchase">Purchase</th>
    <th id="location">Location</th>
    <th id="date">Date</th>
    <th id="evaluation">Evaluation</th>
    <th id="cost">Cost (€)</th>
  </tr>
</thead>
<tbody>
<tr>
  <th id="haircut">Haircut</th>
  <td headers="location haircut">Hairdresser</td>
  <td headers="date haircut">12/09</td>
  <td headers="evaluation haircut">Great idea</td>
  <td headers="cost haircut">30</td>
</tr>

  ...

</tbody>