The HTML <thead> Tag: Definition and Examples

https://believemy.com/en/glossaries/html-and-css/tbodyIntroduction to the <thead> Tag

When creating tables in HTML, the structure and organization of data are essential to ensure good readability and optimal accessibility. The <thead> tag plays a fundamental role in this organization by allowing you to clearly define the header of your tables.

Whether you're developing a web application to display user data, an administrative dashboard, or simply a product list, mastering the <thead> tag will allow you to create professional and semantically correct tables. If you want to deepen your HTML knowledge and discover all the subtleties of tables, our complete HTML course will guide you step by step.

Definition and Syntax of <thead>

What is the <thead> tag?

The <thead> tag (table header) is an HTML element that defines a group of rows constituting the header of a table. It typically contains column titles and allows browsers, screen readers, and search engines to understand the semantic structure of your table.

Unlike a simple table row with <th> cells, using <thead> brings additional semantic meaning that significantly improves the accessibility and maintainability of your code.

Basic syntax

Here is the fundamental syntax for using the <thead> tag:

<table>
  <thead>
    <tr>
      <th>Column Title 1</th>
      <th>Column Title 2</th>
      <th>Column Title 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
  </tbody>
</table>

Position within the table

The <thead> tag must follow a specific order in the table structure. It must appear after the <caption> element (if present) and before the <tbody>, <tfoot> elements, or directly before <tr> rows if you're not using these grouping elements.

<table>
  <caption>Believemy Course List</caption>
  <thead>
    <!-- Table header -->
  </thead>
  <tbody>
    <!-- Table body -->
  </tbody>
  <tfoot>
    <!-- Table footer -->
  </tfoot>
</table>

Available attributes

The <thead> tag accepts all global HTML attributes. Here are the most commonly used:

Practical Usage Examples

Simple example: user data table

Let's start with a concrete example you might encounter in a Believemy application to display a list of learners:

<table>
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Email</th>
      <th scope="col">Course Enrolled</th>
      <th scope="col">Progress</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Marie Dupont</td>
      <td>marie@example.com</td>
      <td>HTML/CSS</td>
      <td>75%</td>
    </tr>
    <tr>
      <td>Pierre Martin</td>
      <td>pierre@example.com</td>
      <td>JavaScript</td>
      <td>45%</td>
    </tr>
  </tbody>
</table>

In this example, we use the scope="col" attribute on each header cell <th>. This attribute indicates that the header applies to the entire column, which is essential for accessibility.

Advanced example: multi-row header

The <thead> tag can contain multiple rows, which is useful for creating hierarchical headers:

<table>
  <thead>
    <tr>
      <th rowspan="2">Learner</th>
      <th colspan="2">Technical Courses</th>
      <th colspan="2">Creative Courses</th>
    </tr>
    <tr>
      <th>HTML/CSS</th>
      <th>JavaScript</th>
      <th>UI Design</th>
      <th>Photoshop</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Sophie Bernard</td>
      <td>Completed</td>
      <td>In Progress</td>
      <td>Not Started</td>
      <td>Completed</td>
    </tr>
  </tbody>
</table>

The rowspan and colspan attributes allow you to merge cells to create logical groupings in the header.

Example with CSS styling

Here's how to effectively style a table header with CSS:

<style>
  .believemy-table {
    width: 100%;
    border-collapse: collapse;
    font-family: Arial, sans-serif;
  }
  
  .believemy-table thead {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
  }
  
  .believemy-table thead th {
    padding: 15px 20px;
    text-align: left;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 3px solid #5a67d8;
  }
  
  .believemy-table thead th:first-child {
    border-radius: 8px 0 0 0;
  }
  
  .believemy-table thead th:last-child {
    border-radius: 0 8px 0 0;
  }
</style>

<table class="believemy-table">
  <thead>
    <tr>
      <th>Course</th>
      <th>Duration</th>
      <th>Level</th>
      <th>Average Rating</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>HTML & CSS</td>
      <td>12 hours</td>
      <td>Beginner</td>
      <td>4.8/5</td>
    </tr>
  </tbody>
</table>

Benefits of Using <thead>

Improved accessibility

One of the major advantages of the <thead> tag is its positive impact on accessibility. Screen readers use this semantic structure to help visually impaired users navigate tables. When a user moves through table cells, the screen reader can repeat the corresponding headers to contextualize each piece of data.

Printing and pagination

When printing a table that spans multiple pages, browsers can automatically repeat the header defined in <thead> at the top of each new page. This feature significantly improves the readability of printed documents.

/* To ensure header repetition when printing */
thead {
  display: table-header-group;
}

@media print {
  thead {
    display: table-header-group;
  }
}

Scrolling with fixed header

The <thead> structure makes it easy to create tables with a fixed header during vertical scrolling:

.table-container {
  max-height: 400px;
  overflow-y: auto;
}

.table-container thead {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

This technique is particularly useful for large data tables where users need to identify columns at all times.

Best Practices and Recommendations

Always pair <thead> with <tbody>

When using <thead>, it is strongly recommended to also use <tbody> to encapsulate the body of your table. This structural consistency makes your code more readable and predictable.

<!-- ✅ Good practice -->
<table>
  <thead>
    <tr><th>Header</th></tr>
  </thead>
  <tbody>
    <tr><td>Data</td></tr>
  </tbody>
</table>

<!-- ❌ Avoid -->
<table>
  <thead>
    <tr><th>Header</th></tr>
  </thead>
  <tr><td>Data</td></tr>
</table>

Use scope attributes for accessibility

For optimal accessibility, use the scope attribute on your header cells:

<thead>
  <tr>
    <th scope="col">Last Name</th>
    <th scope="col">First Name</th>
    <th scope="col">Email</th>
  </tr>
</thead>

The possible values for scope are:

• col: the header applies to the column
• row: the header applies to the row
• colgroup: the header applies to a group of columns
• rowgroup: the header applies to a group of rows

Avoid using tables for layout

Never use <thead> or tables in general for layout purposes. Tables should be reserved exclusively for tabular data. For layout, prefer modern CSS techniques like Flexbox or Grid.

Common Mistakes to Avoid

Forgetting <tr> tags

A frequent mistake is placing <th> cells directly in <thead> without wrapping them in a <tr> row:

<!-- ❌ Incorrect -->
<thead>
  <th>Column 1</th>
  <th>Column 2</th>
</thead>

<!-- ✅ Correct -->
<thead>
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
  </tr>
</thead>

Using <td> instead of <th> in the header

Within a <thead>, always use <th> (table header cell) and not <td> (table data cell). The <th> cells have semantic header meaning and are styled differently by default (bold and centered text).

<!-- ❌ Avoid -->
<thead>
  <tr>
    <td>Title</td>
  </tr>
</thead>

<!-- ✅ Correct -->
<thead>
  <tr>
    <th>Title</th>
  </tr>
</thead>

Placing <thead> in the wrong location

The <thead> tag must always be placed before <tbody> and <tfoot>. Incorrect ordering can lead to display and accessibility issues.

Browser Compatibility

The <thead> tag enjoys excellent compatibility with all modern and legacy browsers:

You can confidently use <thead> in all your projects without worrying about compatibility.

Frequently Asked Questions about <thead>

No, the <thead> tag is not technically mandatory. A table can function without it. However, its use is strongly recommended for accessibility, semantics, and code maintainability reasons. It allows assistive technologies to better understand your table structure and offers practical advantages like automatic header repetition when printing.

Yes, absolutely! The <thead> tag can contain multiple <tr> elements. This is particularly useful for creating hierarchical headers with column groupings using the colspan and rowspan attributes.

The <th> tag represents an individual header cell, while <thead> is a container that groups one or more rows forming the complete table header. Use <th> for each column or row title, and <thead> to encapsulate the overall header section of your table.

To master HTML and CSS, including creating accessible and semantically correct tables, our dedicated course on Believemy will guide you progressively. You'll discover all essential tags, best practices, and numerous practical exercises to solidify your knowledge.