HTML Tutorial

HTML Tag: <thead>

Usage:

  • The <thead> tag defines the header of a table.
  • It is used to group header cells in a table.
  • Can only be used within a <table> element.

Attributes:

  • align: Aligns header cells (left, right, or center).

Examples with <thead>:

  • Example 1: Basic usage
<table>
  <thead>
    <th>Name</th>
    <th>Age</th>
    <th>Occupation</th>
  </thead>
  <tbody>
    <tr>
      <td>John Smith</td>
      <td>30</td>
      <td>Teacher</td>
    </tr>
  </tbody>
</table>
  • Example 2: Aligning header cells
<table>
  <thead>
    <th align="left">Name</th>
    <th align="right">Age</th>
    <th align="center">Occupation</th>
  </thead>
</table>

Simple HTML Example:

<head>
  <title>Table with Header</title>
</head>
<body>
  <table>
    <thead>
      <th>Name</th>
      <th>Age</th>
      <th>Occupation</th>
    </thead>
    <tbody>
      <tr>
        <td>John Smith</td>
        <td>30</td>
        <td>Teacher</td>
      </tr>
    </tbody>
  </table>
</body>

Tips for Accessibility:

  • Use descriptive header cells to provide context for table content.
  • Add an id attribute to the <thead> for referring to it in CSS or JavaScript.
  • Avoid using the <thead> tag for purely styling purposes, as it should only be used to indicate header content.