Table of contents

HTML <thead> Tag

What is HTML <thead> Tag?

The HTML thead tag is used to group the header content in a table. It helps organize and separate the table’s header section from its body and footer. The thead tag contains one or more rows that define the table’s headings, usually using the th (table header) tag.

The HTML thead tag improves both readability and accessibility. It is especially useful when styling tables with CSS or when working with large data tables that need clear separation between headings and data. The thead tag must be used inside the table element, and it usually appears before the tbody tag.

Syntax of the HTML <thead> Tag

plaintext
<table>
  <thead>
    <tr>
      <th>Heading 1</th>
      <th>Heading 2</th>
      <th>Heading 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
  </tbody>
</table>

The thead tag defines the top row of a table as the header section. Each column heading is defined using the th element inside the thead tag.

Examples of HTML <thead> Tag

Example 1: Basic HTML Thead Tag

plaintext
<!DOCTYPE html>
<html lang="en">
<body>

  <table border="1">
    <thead>
      <tr>
        <th>Student Name</th>
        <th>Subject</th>
        <th>Marks</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Math</td>
        <td>90</td>
      </tr>
      <tr>
        <td>Lisa</td>
        <td>Science</td>
        <td>85</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

In this example, the HTML thead tag is used to define the column headings for the student marks table. The table headers include Student Name, Subject, and Marks.

Example 2: SEO Optimized Thead Tag

plaintext
<!DOCTYPE html>
<html lang="en">
<body>

  <table border="1">
    <thead>
      <tr>
        <th>Course Name - Scholar247</th>
        <th>Duration</th>
        <th>Fees</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Web Development</td>
        <td>6 Months</td>
        <td>$500</td>
      </tr>
      <tr>
        <td>Graphic Design</td>
        <td>3 Months</td>
        <td>$300</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

This example shows how the HTML thead tag can be used in an SEO-optimized table. Adding keywords such as “Scholar247” in the table headings helps search engines understand the table’s content. It also gives users clear context when they view the data.

Attributes of the HTML <thead> Tag

The HTML thead tag itself does not have specific attributes. However, you can use global HTML attributes and event attributes such as:

• class: Adds a CSS class for styling the thead section.
• id: Assigns a unique identifier to the thead element.
• style: Allows inline CSS styling for the table header.
• title: Adds additional information as a tooltip.

Best Practices for HTML <thead> Tag

• Always use th elements inside the thead tag to define headers.
• Keep the number of columns consistent between thead, tbody, and tfoot.
• Use CSS for styling instead of inline attributes for better readability.
• Include relevant keywords in your table headers to improve SEO visibility.
• Ensure your table structure follows semantic HTML for accessibility.

FAQs About the HTML <thead> Tag

What is the purpose of the HTML thead tag?

The thead tag defines the header section of a table. It helps group the heading content and keeps it separate from the body and footer of the table.

Can I use multiple thead tags in one table?

No, each table should contain only one thead section. If you need multiple header rows, include more than one tr tag inside the same thead.

Does the thead tag affect SEO?

Yes. Using the thead tag correctly helps search engines better understand the structure of your table content. It can also make your data more accessible for rich search results.

Where should the thead tag be placed in an HTML table?

The thead tag must be placed inside the table element and always appear before the tbody tag.

What is the difference between thead and tbody?

The thead tag defines the header section that contains column titles, while the tbody tag defines the main data body of the table. Both work together to create a structured and readable table layout.

HTML

Related Articles