Tables in HTML

Grouping rows

HTML provides three elements that can help authors organize the data presented in a table. These elements are: thead, to group the rows that present heading information; tfoot to contain rows that represent a footer or summary; and tbody, to represent a block of rows that consist of a body of data.

The idea in this grouping method is very straightforward, so let's proceed with the following example. The table below organizes bank account data for Anthony and Leone. For this purpose, it has a heading block composed by two rows of heading cells, a footer that summarizes information in the form of a balance, and one block of rows conforming the body of the table.

<table class="default">
  <thead>
    <tr>
      <th></th>
      <th colspan="2">Anthony</th>
      <th colspan="2">Lione</th>
    </tr>
    <tr>
      <th scope="col">Date</th>
      <th>Income</th>
      <th>Outcome</th>
      <th>Income</th>
      <th>Outcome</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>07/15</th>
      <td>$200,00</td>
      <td>$50,00</td>
      <td>$0</td>
      <td>$0</td>
    </tr>
    <tr>
      <th>07/28</th>
      <td>$0,00</td>
      <td>$100,00</td>
      <td>$100,00</td>
      <td>$0,00</td>
    </tr>
    <tr>
      <th>08/09</th>
      <td>$0,00</td>
      <td>$50,00</td>
      <td>$0,00</td>
      <td>$80,00</td>
    </tr>
    <tr>
      <th>08/22</th>
      <td>$40,00</td>
      <td>$0,00</td>
      <td>$0,00</td>
      <td>$110,00</td>
    </tr>
    <tr>
      <th>08/25</th>
      <td>$0,00</td>
      <td>$20,00</td>
      <td>$0,00</td>
      <td>$0,00</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Balance</th>
      <td colspan="2">$20,00</td>
      <td colspan="2">$10,00</td>
    </tr>
  </tfoot>
</table>
Anthony Lione
Date Income Outcome Income Outcome
07/15 $200,00 $50,00 $0 $0
07/28 $0,00 $100,00 $100,00 $0,00
08/09 $0,00 $50,00 $0,00 $80,00
08/22 $40,00 $0,00 $0,00 $110,00
08/25 $0,00 $20,00 $0,00 $0,00
Balance $20,00 $10,00

Tables' bodies have two particularities: first, there can be more than one body in one table; and second, the tbody element can be ommited when the table has only one body. Tables that fit in the second case are said to have an implicit body.

When a table has multiple bodies, each body must group rows that are thematically related. In the following example, the same table presented above has been restructured to contain two bodies, one for each month. These thematic groups are merely semantic, but we'll add some styles to them just to make the groups visible.

Authors should avoid grouping rows only for stylistic purposes. Such practice would constitute a misuse of the tbody element.

<table class="default">
  <thead>
    <tr>
      <th></th>
      <th colspan="2">Anthony</th>
      <th colspan="2">Lione</th>
    </tr>
    <tr>
      <th scope="col">Date</th>
      <th>Income</th>
      <th>Outcome</th>
      <th>Income</th>
      <th>Outcome</th>
    </tr>
  </thead>
  <tbody style="background: rgba(128, 255, 0, 0.3); border: 1px solid rgba(100, 200, 0, 0.3);">
    <tr>
      <th>07/15</th>
      <td>$200,00</td>
      <td>$50,00</td>
      <td>$0</td>
      <td>$0</td>
    </tr>
    <tr>
      <th>07/28</th>
      <td>$0,00</td>
      <td>$100,00</td>
      <td>$100,00</td>
      <td>$0,00</td>
    </tr>
  </tbody>
  <tbody style="background: rgba(255, 128, 0, 0.3); border: 1px solid rgba(200, 100, 0, 0.3);">
    <tr>
      <th>08/09</th>
      <td>$0,00</td>
      <td>$50,00</td>
      <td>$0,00</td>
      <td>$80,00</td>
    </tr>
    <tr>
      <th>08/22</th>
      <td>$40,00</td>
      <td>$0,00</td>
      <td>$0,00</td>
      <td>$110,00</td>
    </tr>
    <tr>
      <th>08/25</th>
      <td>$0,00</td>
      <td>$20,00</td>
      <td>$0,00</td>
      <td>$0,00</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Balance</th>
      <td colspan="2">$20,00</td>
      <td colspan="2">$10,00</td>
    </tr>
  </tfoot>
</table>
Anthony Lione
Date Income Outcome Income Outcome
07/15 $200,00 $50,00 $0 $0
07/28 $0,00 $100,00 $100,00 $0,00
08/09 $0,00 $50,00 $0,00 $80,00
08/22 $40,00 $0,00 $0,00 $110,00
08/25 $0,00 $20,00 $0,00 $0,00
Balance $20,00 $10,00

Prev12345Next