<thead> - the header section of the table

<thead> is a tag in HTML tables used to define the header section, typically containing the title row or column of a table. It must appear as a direct child of the <table> element and is used in conjunction with <tbody> and <tfoot> to ensure a clear and semantic table structure.

Basic Syntax of <thead>

The syntax for <thead> is very simple. It should be wrapped inside the <table> tag and contain one or more <tr> (table row) elements. For example:

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Occupation</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Zhang San</td>
      <td>25</td>
      <td>Frontend Engineer</td>
    </tr>
  </tbody>
</table>

Typical Use Cases for <thead>

<thead> is primarily used to define the title row of a table, usually containing <th> (header cells) instead of <td> (data cells). Here’s a more complex example showcasing multi-column headers:

<table>
  <thead>
    <tr>
      <th colspan="2">Personal Information</th>
      <th colspan="3">Contact Details</th>
    </tr>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Phone</th>
      <th>Email</th>
      <th>Address</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Li Si</td>
      <td>30</td>
      <td>13800138000</td>
      <td>lisi@example.com</td>
      <td>Beijing</td>
    </tr>
  </tbody>
</table>

Combining <thead> with CSS Styling

You can apply specific styles to <thead> using CSS, such as fixing the header, adding background colors, or borders:

<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }
  thead {
    background-color: #f2f2f2;
    position: sticky;
    top: 0;
  }
  th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
  }
</style>

Notes on Using <thead>

1. Must Contain <tr>: <thead> cannot directly contain <th> or <td>; they must be wrapped in <tr>.
2. Order with <tbody> and <tfoot>: The recommended order is <thead> → <tfoot> → <tbody>, but browsers will render correctly regardless of the order.
3. Repeating Headers in Print: For long tables, the content of <thead> will repeat at the top of each page when printed.

JavaScript Example for Dynamically Generating <thead>

Here’s an example of dynamically generating a table with <thead> using JavaScript:

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const data = [
      { name: 'Wang Wu', age: 28, job: 'Designer' },
      { name: 'Zhao Liu', age: 35, job: 'Product Manager' }
    ];
    
    const table = document.createElement('table');
    const thead = document.createElement('thead');
    thead.innerHTML = `
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Occupation</th>
      </tr>
    `;
    
    const tbody = document.createElement('tbody');
    data.forEach(item => {
      tbody.innerHTML += `
        <tr>
          <td>${item.name}</td>
          <td>${item.age}</td>
          <td>${item.job}</td>
        </tr>
      `;
    });
    
    table.appendChild(thead);
    table.appendChild(tbody);
    document.body.appendChild(table);
  });
</script>

Handling <thead> in Responsive Design

On small screens, you can transform the table into a card layout using CSS while preserving the semantics of <thead>:

@media (max-width: 600px) {
  table thead {
    display: none;
  }
  table tr {
    display: block;
    margin-bottom: 1rem;
    border: 1px solid #ddd;
  }
  table td {
    display: flex;
    justify-content: space-between;
  }
  table td::before {
    content: attr(data-label);
    font-weight: bold;
    margin-right: 1rem;
  }
}

The corresponding HTML requires adding a data-label attribute to each <td>:

<table>
  <thead>
    <tr>
      <th>Product</th>
      <th>Price</th>
      <th>Stock</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="Product">Phone</td>
      <td data-label="Price">¥2999</td>
      <td data-label="Stock">50</td>
    </tr>
  </tbody>
</table>

Accessibility Practices for <thead>

To enhance accessibility, consider:

• Adding a scope attribute (col or row) to <th>
• Using aria-label to describe complex headers
• Ensuring clear association between headers and data cells

<table>
  <thead>
    <tr>
      <th scope="col" aria-label="Student Name">Name</th>
      <th scope="col" aria-label="Math Score">Math</th>
      <th scope="col" aria-label="Chinese Score">Chinese</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Xiao Ming</td>
      <td>90</td>
      <td>85</td>
    </tr>
  </tbody>
</table>