<thead>

The `<thead>` element defines a table's header, grouping `<tr>` rows with `<th>` cells to label columns consistently.

`<thead>` Tag

The <thead> element in HTML is used to define the header section of a table. It groups one or more header rows within a table and is typically used alongside the <tbody> and <tfoot> elements to structure tables more effectively.

Syntax

index.html

<table>
  <thead>
    <tr>
      <td> ... </td>
    </tr>
  </thead>
  <tfoot> ... </tfoot>
  <tbody> ... </tbody>
</table>

`thead` Demo

ID	Name	Department
001	John Doe	IT
Total Employees: 1

index.html

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Department</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>001</td>
      <td>John Doe</td>
      <td>IT</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">Total Employees: 1</td>
    </tr>
  </tfoot>
</table>

Attributes

The <thead> element does not have specific attributes but supports global attributes.

Deprecated Attribute

align (Removed in HTML5)

left: Aligns content to the left.
center: Centers content.
right: Aligns content to the right.
justify: Adjusts spacing for justified text.
char: Aligns text based on a specific character.

Conclusion

The <thead> tag in HTML plays a crucial role in organizing and structuring tables by grouping the header content separately from the body and footer. When used alongside <tbody> and <tfoot>, it contributes to a well-structured and semantic table layout, enhancing both user experience and code maintainability.

<tbody>

The HTML <tbody> element encapsulates the main body of a table, consisting of rows (<tr>) that hold the primary data, separate from the header (<thead>) and footer (<tfoot>) sections.

<th>

The HTML <th> element creates a header cell in a table, used to label columns or rows with bold, centered text, indicating the title for the corresponding data.