20. The 3 Parts of a Table (<thead>, <tbody>, <tfoot>)

Explanation

In professional web pages, tables are divided into 3 semantic parts:

• <thead>: The header part of the table (column names). When a large page is printed, the header repeats itself on every page.
• <tbody>: The main data of the table.
• <tfoot>: The bottom part of the table, where the Total/Summary is shown.

Golden rules

• A table should have only one thead and only one tfoot.

Example code

<!DOCTYPE html>
<html>
<head>
  <style>
    table { width: 100%; border-collapse: collapse; font-family: sans-serif; font-size: 13px; }
    th, td { border: 1px solid #cbd5e1; padding: 6px; }
  </style>
</head>
<body style="padding: 10px;">
  <table>
    <thead style="background: #0f172a; color: white;">
      <tr><th>Item</th><th>Price</th></tr>
    </thead>
    <tbody>
      <tr><td>Book</td><td>₹300</td></tr>
      <tr><td>Pen</td><td>₹50</td></tr>
    </tbody>
    <tfoot style="background: #e2e8f0; font-weight: bold;">
      <tr><td>Total:</td><td>₹350</td></tr>
    </tfoot>
  </table>
</body>
</html>

Run & edit this in the live editor

Quick quiz

Which semantic tag is used to show a total or summary in the bottom part of a table?

1. <bottom>
2. <tfoot>
3. <summary>
4. <footer-row>