HTML thead Tag

HTML <thead> Tag: Table Header Section

The <thead> tag in HTML is used to group the header content of a table. It helps structure tables by separating headers from the table body (<tbody>) and footer (<tfoot>).

1. Basic Syntax

<table border="1">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Country</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>25</td>
      <td>USA</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>30</td>
      <td>UK</td>
    </tr>
  </tbody>
</table>

✅ Separates the header row from the table body.

2. Why Use <thead>?

✅ Improves structure & readability
✅ Helps with accessibility & SEO
✅ Works well with CSS & JavaScript for styling and sorting

3. Styling <thead> with CSS

You can style the header separately:

<style>
  thead {
    background-color: #007bff;
    color: white;
  }
</style>

✅ Makes the header blue with white text.

4. <thead> with <tfoot> Example

<table border="1">
  <thead>
    <tr>
      <th>Product</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Laptop</td>
      <td>$1000</td>
    </tr>
    <tr>
      <td>Phone</td>
      <td>$500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>$1500</td>
    </tr>
  </tfoot>
</table>

✅ Keeps the table organized by grouping headers and footers separately.

5. When to Use <thead>?

✅ Tables with large datasets
✅ Sortable or filterable tables
✅ Making data more structured & accessible

6. Conclusion

• The <thead> tag groups table headers for better structure.

• Works with <tbody> and <tfoot> for clear separation.

• Improves styling, sorting, and accessibility.