HTML <thead> Tag Tutorial - Usage, Syntax, Attributes and Example

Introduction
Attributes
Frequently Asked Questions (FAQ)

INTRODUCTION

The <thead> element is used to group the header content of an HTML table. It typically contains one or more rows (<tr>) with heading cells (<th>) that describe the columns of the table.

The <thead> element is used along side the <tbody> element and <tfoot> element which helps organize the table by separating the header from the body and the footer which improves structure, readability, and accessibility..

Example:


<table>
  <thead>
    <tr>
        <th>Fruit</td>
        <th>Price</td>
        <th>Quantity</td>
    </tr>
  </thead>
    <tr>
        <td>Apple</td>
        <td>$1</td>
        <td>50</td>
    </tr>
    <tr>
        <td>Banana</td>
        <td>$0.5</td>
        <td>100</td>
    </tr>
</table>

Output:

Fruit	Price	Quantity
Apple	$1	50
Banana	$0.5	100

Attributes

The <thead> element only has global Attributes. The following attribute are Deprecated and is advised to not use them. They are mentioned just for reference for updating legacy code or for historical interest.

align
bgcolor
char
charoff
valign

Usage Notes

You can enhance styling of html table by apply specific styles to headers using CSS.
The <thead> element should come after any <caption> or <colgroup> elements, and before <tbody>, <tfoot>, or any <tr> elements.
Together with <tbody> and <tfoot>, the <thead> element adds meaningful structure to a table and is useful for both screen and print display. Grouping table content this way also helps assistive technologies like screen readers and improves search engine understanding.
You can use the colspan attribute when the header cells span across multiple columns and rows

Tag Omission

The start tag is required. The end tag can be omitted if it is directly followed by a <tbody> or <tfoot> element.

Permitted parents

The permitted parent of <thead> element is <table> element.

Frequently Asked Questions(FAQ)

What is the difference between HTML <thead> and <th> elements ?

The <thead> element Defines a group of rows that make up the header of a table. It Usually wraps around one or more <tr> (table row) elements.

The <th> element stands for Table Header. It Represents an individual header cell inside a row. This element is Typically used inside <thead>, but can also be used in other parts of the table to label rows or columns.

Can a table have multiple <thead> elements?

no — an HTML table should only have one <thead> element according to the HTML specification.

Where should the <thead> element be placed within a <table>?

The <thead> element should come after any <caption> or <colgroup> elements, and before <tbody>, <tfoot>, or any <tr> elements.

What is the purpose of the <thead> tag in HTML tables?

The <thead> element is used define the header of table. This element groups a set of rows at the top of a table. These rows usually contain column headers using <th> elements to describe the table's columns.

HTML <thead> Tag Tutorial - Usage, Syntax, Attributes, faq and Example

Table of Contents