<thead> / <tbody> / <tfoot> / <caption>

The <thead>, <tbody>, and <tfoot> elements group table rows into a header, body, and footer, respectively. The <caption> element adds a title to a table.

Syntax

<table>
  <caption>Table Title</caption>
  <thead>
    <tr><th>Heading 1</th><th>Heading 2</th></tr>
  </thead>
  <tbody>
    <tr><td>Data 1</td><td>Data 2</td></tr>
  </tbody>
  <tfoot>
    <tr><td>Total</td><td>100</td></tr>
  </tfoot>
</table>

Tag List

Tag	Description
<caption>	Specifies a title or heading for the table. Must be the first child element of `<table>`.
<thead>	Represents the header row group of a table. Place rows containing column headings here.
<tbody>	Represents the body (data rows) group of a table. Place the actual data rows here. Multiple `<tbody>` elements are allowed.
<tfoot>	Represents the footer row group of a table. Place totals, notes, or summaries here.

Sample Code

<table border="1">
  <!-- Table title -->
  <caption>2024 Monthly Sales</caption>

  <!-- Header row group -->
  <thead>
    <tr>
      <th scope="col">Month</th>
      <th scope="col">Sales (¥10k)</th>
      <th scope="col">MoM Change</th>
    </tr>
  </thead>

  <!-- Data row group -->
  <tbody>
    <tr>
      <td>Jan</td>
      <td>120</td>
      <td>+5%</td>
    </tr>
    <tr>
      <td>Feb</td>
      <td>98</td>
      <td>-18%</td>
    </tr>
    <tr>
      <td>Mar</td>
      <td>145</td>
      <td>+48%</td>
    </tr>
  </tbody>

  <!-- Footer row group (totals, etc.) -->
  <tfoot>
    <tr>
      <td>Total</td>
      <td>363</td>
      <td>—</td>
    </tr>
  </tfoot>
</table>

Result

A table with the caption "2024 Monthly Sales" is displayed. The structure consists of a header row, three data rows, and a total footer row. When printed across multiple pages, some browsers repeat the header and footer on each page.

Notes

Using <thead>, <tbody>, and <tfoot> makes the table structure explicit, which improves compatibility with screen readers and makes CSS styling easier. According to the HTML specification, <tfoot> may appear before <tbody> (immediately after <thead>), but the rendered order is always body then footer. Modern browsers render correctly regardless of source order, but placing <tfoot> at the end is the common convention for readability.

<caption> provides a brief description of the table's content and is recommended for accessibility. By default it appears centered above the table, but you can move it below using the CSS caption-side property.

For the basic table structure (<table>, <tr>, <td>, <th>), see 'table / tr / td / th'.