HTML <thead> Tag

The HTML <thead> tag is used to define the header section of a table. It is part of the table structure that organizes tabular data into rows and columns. The <thead> element groups a set of rows that serve as headers for the columns in a table, providing context and improving the readability of the data. The <thead> tag is typically used in combination with the <tbody> and <tfoot> tags to structure a table comprehensively.

Syntax of the <thead> Tag

The <thead> tag is used within the <table> element to define a group of header rows. Here’s the syntax:

html
<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <!-- Table body rows go here -->
  </tbody>
</table>

The <thead> tag contains one or more <tr> (table row) elements, which in turn contain <th> (table header) elements. Each <th> defines a header cell for the columns.

Attributes of the <thead> Tag

The <thead> tag supports both global and event attributes, giving it flexibility for styling and scripting interactions.

Global Attributes

  • class: Defines one or more class names for the element.
  • id: Assigns a unique identifier for the element.
  • style: Used for inline CSS to apply custom styles to the table header.
  • lang: Specifies the language of the element’s content.

Event Attributes

  • onclick: Script to be executed when the element is clicked.
  • onmouseover: Script to be executed when the mouse hovers over the element.
  • onmouseout: Script to be executed when the mouse moves out of the element.

The <thead> tag itself does not have specific attributes, but the global and event attributes can be applied for enhanced functionality and interactivity.

Examples of HTML <thead> Tag

Example 1: Simple Table with Header Section.

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table Header Example</title>
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                <th>Name</th>
                <th>Age</th>
                <th>City</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>John</td>
                <td>30</td>
                <td>New York</td>
            </tr>
            <tr>
                <td>Jane</td>
                <td>25</td>
                <td>Los Angeles</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

In this example, the <thead> tag defines the header row with three columns: "Name," "Age," and "City." The <tbody> tag follows, containing the data rows.

Example 2: Table with Multiple Sections and Footer.

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table with Header and Footer</title>
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                <th>Product</th>
                <th>Price</th>
                <th>Quantity</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Apples</td>
                <td>$2</td>
                <td>10</td>
            </tr>
            <tr>
                <td>Bananas</td>
                <td>$1</td>
                <td>20</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="3">Total: $50</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

This example includes the <thead>, <tbody>, and <tfoot> tags to organize the table. The <thead> contains the column headers, and the <tfoot> tag displays the table’s footer with the total price.

FAQs About HTML <thead> Tag

Q1: What is the purpose of the HTML <thead> tag?
A: The <thead> tag is used to group the header rows of a table, making it easier to understand the table’s content and improving the table's accessibility.

Q2: Can the <thead> tag be used without <tbody>?
A: Technically, the <thead> tag can be used without a <tbody>, but it is recommended to use them together for better structure and readability.

Q3: Does the <thead> tag improve SEO?
A: Yes, using the <thead> tag improves the semantic structure of the table, which helps search engines understand and index the content more effectively.

Q4: Can the <thead> tag contain multiple rows?
A: Yes, the <thead> tag can contain multiple rows by using multiple <tr> elements within it, allowing you to create complex table headers.

Q5: Is the <thead> tag supported in all browsers?
A: Yes, the <thead> tag is supported in all major browsers, including Chrome, Firefox, Safari, Edge, and Internet Explorer.

tools

HTML

Related Articles