HTML `` Element: Structuring Table Headers for Improved Readability

Learn how to use the HTML `` element to properly structure the header section of your tables. This tutorial explains its purpose, demonstrates its usage, and shows how to style table headers using CSS for enhanced readability and a better user experience, particularly for large tables.

Understanding the HTML <thead> Element

What is the <thead> Element?

The HTML <thead> element (table head) defines the header section of an HTML table. It's a container for one or more rows (<tr> elements) that contain the table's header cells (<th> elements). Browsers use the <thead> element to handle things like independent scrolling of the table body and to ensure that the header is consistently displayed, even when the table is printed across multiple pages. This improves readability and user experience, especially for large tables.

Example:

<table>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
  </tbody>
</table>

Using <thead>

• The <thead> element must contain one or more <tr> (table row) elements, each containing <th> (table header) cells.
• It should be placed within the <table> element, before any <tbody> and <tfoot> elements.
• While <thead>, <tbody>, and <tfoot> don't inherently affect layout, you can style them with CSS for better control.

Browser Support

The <thead> element is widely supported by all major browsers.

Styling <thead> with CSS

CSS provides a powerful way to customize the visual appearance of your table headers. You can control things like background color, text alignment, fonts, and borders to create a well-designed and user-friendly table.

Example:

thead {
  background-color: lightblue;
  font-weight: bold;
}