html
  1. html-thead-tag

HTML <thead> Tag

  • The HTML <thead> tag defines the head section of a table, which consists of one or more rows that define the column headers for the table.
  • It is used in conjunction with the <tbody> and <tfoot> tags to structure the content of the table.

Syntax

The basic syntax for the <thead> tag is as follows:

<table>
  <thead>
    <tr>
      <th>Column 1 Header</th>
      <th>Column 2 Header</th>
      <th>Column 3 Header</th>
    </tr>
  </thead>
  <tbody>
    <!-- Table data here -->
  </tbody>
  <tfoot>
    <!-- Table summary or footer here -->
  </tfoot>
</table>

Example

Here is an example of how to use the <thead> tag in HTML:

<table>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Email</th>
      <th>Phone</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John</td>
      <td>Doe</td>
      <td>johndoe@example.com</td>
      <td>(123) 456-7890</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jane</td>
      <td>Smith</td>
      <td>janesmith@example.com</td>
      <td>(987) 654-3210</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="4">Total</td>
      <td>2</td>
    </tr>
  </tfoot>
</table>
Try Playground

Explanation

The <thead> tag is used to define the header of a table. It contains one or more <tr> elements, each of which contains one or more <th> elements, which define the column headers for the table. The <thead> element must be placed before the <tbody> and <tfoot> elements in the table.

Use

The <thead> tag is used to define the header section of an HTML table. It is useful when displaying large amounts of data in tables, as it provides a structure that makes it easier to read and understand. It helps to separate the column headers from the table data and can be used in conjunction with the <tbody> and <tfoot> tags to structure the content of the table.

Important Points

  • The <thead> tag is used to define the header section an HTML table.
  • It contains one or more <tr> elements, each of which contains one or more <th> elements that define the column headers for the table.
  • It must be placed before the <tbody> and <tfoot> elements in the table.
  • The <thead> tag helps to structure the content of the table and make it easier to read and understand.

Summary

The <thead> tag is an important part of structuring an HTML table. It defines the column headers for the table and separates them from the table data. It is often used in conjunction with the <tbody> and <tfoot> tags to structure the content of the table and make it easier to read and understand.

Published on: