Table Headers

The <th> element defines a header cell in a table. It is bold and centered by default. Use the scope attribute to clarify whether a header applies to a column (scope="col") or a row (scope="row"). This is vital for accessibility.

Table Sections: thead, tbody, tfoot

HTML tables can be divided into three sections: <thead> groups the header rows, <tbody> groups the body rows, and <tfoot> groups the footer rows. These groupings allow different CSS styling per section and enable the browser to scroll the body independently of a fixed header in long tables.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Table Headers</title>
  <style>
    table { border-collapse: collapse; width: 100%; }
    th, td { border: 1px solid #aaa; padding: 8px; }
    thead { background: #333; color: white; }
    tfoot { background: #f5f5f5; font-weight: bold; }
    tbody tr:nth-child(even) { background: #fafafa; }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th scope="col">Product</th>
        <th scope="col">Qty</th>
        <th scope="col">Price</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Widget A</th>
        <td>3</td>
        <td>$9.99</td>
      </tr>
      <tr>
        <th scope="row">Widget B</th>
        <td>1</td>
        <td>$24.99</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="2">Total</td>
        <td>$54.96</td>
      </tr>
    </tfoot>
  </table>
</body>
</html>

HTML

Full Editor

Pro Tip

Always add scope="col" or scope="row" to your <th> elements — without it, screen readers cannot reliably associate header cells with their data cells.

Related Resources

HTML Reference

Complete tag & property list

HTML How-To Guides

Step-by-step practical guides

HTML Exercises

Practice what you've learned