HTML Course 7.5 Advanced table structure (caption, thead, tbody, tfoot)

HTML Course 7.5: Advanced Table Structure (caption, thead, tbody, tfoot)

In complex data tables, semantic grouping of rows and descriptive titles is essential
for both human readers and assistive technologies. The <caption>,
<thead>, <tbody> and <tfoot>
elements provide this structure.

1. The <caption> Element

The <caption> element defines a table’s title or summary.
It must be placed immediately after the opening <table> tag.

Helps screen readers announce the purpose of the table.
Can be styled or repositioned with CSS if needed (e.g., caption-side).
If omitted, users may not understand the context of the data.

Example with a caption:

<table>
  <caption>Monthly Sales Report for 2023</caption>
  <thead>
    <tr>
      <th>Month</th>
      <th>Revenue</th>
      <th>Expenses</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$12,000</td>
      <td>$8,000</td>
    </tr>
    <!-- More rows here -->
  </tbody>
  <tfoot>
    <tr>
      <td colspan='3'>End of Report</td>
    </tr>
  </tfoot>
</table>

2. The <thead> Element

The <thead> groups the header rows of the table. Use it to:

Enclose one or more <tr> elements that define column headings.
Enable browsers to repeat the header on each printed page.
Assist scripts in identifying header cells for dynamic sorting or filtering.

Inside <thead>, each header cell is usually marked with <th>
and may include a scope attribute (col or row).

Example of a table header:

<thead>
  <tr>
    <th scope='col'>Product</th>
    <th scope='col'>Price</th>
    <th scope='col'>In Stock</th>
  </tr>
</thead>

3. The <tbody> Element

The <tbody> contains the main data rows. Best practices:

There must be at least one <tbody> if the table has data rows.
Splitting large tables into multiple <tbody> sections can group related data.
Scripts can target specific <tbody> blocks for pagination or filtering.

Example of a table body:

<tbody>
  <tr>
    <td>Apples</td>
    <td>$1.20</td>
    <td>Yes</td>
  </tr>
  <tr>
    <td>Oranges</td>
    <td>$0.95</td>
    <td>No</td>
  </tr>
</tbody>

4. The <tfoot> Element

The <tfoot> groups summary or footer rows. Its typical uses:

Display totals, averages or other aggregated data.
Remain visible at the bottom of each printed page when repeating headers.
Enhance readability by separating summaries from main data.

Note: Some browsers expect <tfoot> immediately after <thead> in source order,
even if it renders after <tbody>.

Example of a table footer:

<tfoot>
  <tr>
    <td>Total</td>
    <td>$2,150</td>
    <td>&mdash;</td>  <!-- no aggregate for availability -->
  </tr>
</tfoot>

5. Combined Example

Putting it all together in a fully structured table:

<table>
  <caption>Quarterly Performance Metrics</caption>
  <thead>
    <tr>
      <th scope='col'>Quarter</th>
      <th scope='col'>Revenue</th>
      <th scope='col'>Profit</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Q1</td>
      <td>$50,000</td>
      <td>$5,000</td>
    </tr>
    <tr>
      <td>Q2</td>
      <td>$60,000</td>
      <td>$8,000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Year Total</td>
      <td>$110,000</td>
      <td>$13,000</td>
    </tr>
  </tfoot>
</table>

Key Takeaways

Always include a <caption> for clarity and accessibility.
Wrap header rows in <thead> and mark cells with scope.
Group data rows in one or multiple <tbody> sections for logical separation.
Place summary rows in <tfoot> to keep totals or notes distinct.
Maintain the correct source order (thead, tbody, then tfoot) for best browser support.

HTML Course 7.5 Advanced table structure (caption, thead, tbody, tfoot)