Header cell (th)

Basic Concepts of Table Header Cells (th)

The table header cell <th> is an HTML tag used to define header cells in a table. Unlike regular cells <td>, <th> has bold and centered text by default and semantically represents the table's title or categorical information. <th> typically appears in the first row or first column of a table to identify the data type for each column or row.

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>Occupation</th>
  </tr>
  <tr>
    <td>Zhang San</td>
    <td>28</td>
    <td>Engineer</td>
  </tr>
</table>

Differences Between th and td

Although both <th> and <td> are table cells, there are several key differences:

1. Semantic Difference: <th> represents header information, while <td> represents regular data.
2. Default Styling: <th> text is bold and centered, while <td> text is regular and left-aligned.
3. Accessibility: Screen readers handle these two cell types differently.

<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
    <th>Stock</th>
  </tr>
  <tr>
    <td>Smartphone</td>
    <td>¥3999</td>
    <td>120</td>
  </tr>
</table>

The Scope Attribute of th

The <th> element supports the scope attribute to clarify the relationship between header and data cells:

• scope="col": Header applies to a column.
• scope="row": Header applies to a row.
• scope="colgroup": Header applies to a column group.
• scope="rowgroup": Header applies to a row group.

<table>
  <tr>
    <th scope="col">Month</th>
    <th scope="col">Income</th>
    <th scope="col">Expenses</th>
  </tr>
  <tr>
    <th scope="row">January</th>
    <td>¥50,000</td>
    <td>¥30,000</td>
  </tr>
</table>

colspan and rowspan Attributes for th

Like <td>, <th> can also span multiple columns or rows:

<table>
  <tr>
    <th colspan="2">Student Information</th>
    <th colspan="2">Grades</th>
  </tr>
  <tr>
    <th>Student ID</th>
    <th>Name</th>
    <th>Chinese</th>
    <th>Math</th>
  </tr>
</table>

Header Grouping with th

For complex tables, use <thead>, <tbody>, and <tfoot> to group headers:

<table>
  <thead>
    <tr>
      <th>Date</th>
      <th>Sales</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>2023-01-01</td>
      <td>¥12,000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Total</th>
      <td>¥12,000</td>
    </tr>
  </tfoot>
</table>

Customizing th Styles

Although <th> has default styling, it can be fully customized with CSS:

<style>
  th {
    background-color: #f2f2f2;
    color: #333;
    padding: 12px;
    text-align: left;
    border-bottom: 2px solid #ddd;
  }
</style>

<table>
  <tr>
    <th>City</th>
    <th>Population</th>
  </tr>
  <tr>
    <td>Beijing</td>
    <td>21.71 million</td>
  </tr>
</table>

th in Responsive Design

On small-screen devices, you can modify <th> display with CSS:

<style>
  @media screen and (max-width: 600px) {
    table, thead, tbody, th, td, tr {
      display: block;
    }
    th {
      position: absolute;
      top: -9999px;
      left: -9999px;
    }
    tr { border: 1px solid #ccc; }
    td {
      border: none;
      position: relative;
      padding-left: 50%;
    }
    td:before {
      position: absolute;
      left: 6px;
      content: attr(data-th);
      font-weight: bold;
    }
  }
</style>

th and ARIA Roles

To enhance accessibility, combine with ARIA roles:

<table role="grid">
  <tr>
    <th role="columnheader">Product Name</th>
    <th role="columnheader">Price</th>
  </tr>
  <tr>
    <td role="gridcell">Laptop</td>
    <td role="gridcell">¥5999</td>
  </tr>
</table>

th in Complex Tables

For tables with multi-level headers:

<table>
  <thead>
    <tr>
      <th rowspan="2">Year</th>
      <th colspan="2">Q1</th>
      <th colspan="2">Q2</th>
    </tr>
    <tr>
      <th>Revenue</th>
      <th>Profit</th>
      <th>Revenue</th>
      <th>Profit</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>2023</td>
      <td>¥1M</td>
      <td>¥200K</td>
      <td>¥1.2M</td>
      <td>¥300K</td>
    </tr>
  </tbody>
</table>

Combining th with Form Elements

Header cells can also contain form elements:

<table>
  <tr>
    <th>
      <input type="checkbox" id="selectAll">
      <label for="selectAll">Select All</label>
    </th>
    <th>Item Name</th>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>Item A</td>
  </tr>
</table>

Performance Considerations for th

Complex tables with extensive <th> usage may impact performance:

// Avoid adding event listeners to each <th> in large tables
document.querySelector('table').addEventListener('click', function(e) {
  if(e.target.tagName === 'TH') {
    console.log('Header clicked:', e.target.textContent);
  }
});

Internationalization Considerations for th

For right-to-left (RTL) languages, <th> styling may need adjustment:

<html dir="rtl">
<style>
  th {
    text-align: right;
  }
</style>
<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
</table>
</html>