Table Structure

Organize tables with <thead>, <tbody>, and <tfoot> for semantics and styling.

Overview

HTML tables can be divided into three structural sections using <thead>, <tbody>, and <tfoot>: - <thead>: the header section (column labels) - <tbody>: the main body of data - <tfoot>: the footer section (totals, summaries) These sections make large tables semantically clear, improve accessibility (screen readers identify the structure), and enable CSS styling of each section independently. Browsers may also repeat the <thead> when printing a long table across multiple pages. These wrappers are optional but considered best practice for any table with more than a few rows.

Key Points

•<thead> wraps header rows column titles and labels
•<tbody> wraps data rows the main content
•<tfoot> wraps footer rows totals, averages, or summaries
•Using these sections enables independent CSS styling per section
•Browsers may repeat <thead> when printing multi-page tables
•These elements are direct children of <table>; <tr> elements go inside them

Examples

Complete structured table with all three sections

<table>
  <caption>Quarterly Sales</caption>
  <thead>
    <tr>
      <th scope="col">Month</th>
      <th scope="col">Units Sold</th>
      <th scope="col">Revenue</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>120</td>
      <td>$6,000</td>
    </tr>
    <tr>
      <td>February</td>
      <td>95</td>
      <td>$4,750</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>215</td>
      <td>$10,750</td>
    </tr>
  </tfoot>
</table>

Styling thead and tbody differently with CSS

<style>
  thead { background-color: #1a1a2e; color: white; }
  tbody tr:nth-child(even) { background-color: #f5f5f5; }
  tfoot { font-weight: bold; border-top: 2px solid #333; }
</style>

These CSS selectors target the structural sections directly.

Common Mistakes

Placing <thead> after <tbody> it must appear first in source order
Putting <tr> directly in <table> without <thead>/<tbody> when the table has complex structure
Using <tfoot> for visual footers unrelated to the table data

Note

Always use <thead>, <tbody>, and <tfoot> on tables with more than 3 rows. It costs nothing, helps screen readers, enables CSS striping, and makes the code easier to read.

Table Structure

Overview

Key Points

Examples

Common Mistakes

Note

Exercises

Knowledge Check

What does <thead> contain in a table?