th: The Table Header Cell element

The <th> HTML element defines a cell as the header of a group of table cells. The exact nature of this group is defined by the scope and headers attributes.

Attributes

Specific attributes

Allowed attributes

colspan="[number]" contains a non-negative integer value that indicates how many columns the header cell spans or extends. The default value is 1.

headers="[list of header ids]" contains a list of space-separated strings, each corresponding to the id attribute of the <th> elements that provide headings for this header cell.

rowspan="[number]" contains a non-negative integer value that indicates how many rows the header cell spans or extends. The default value is 1.

scope="[scope type]" defines the cells that the header (defined in the <th>) element relates to. Possible values are:

• row: The header relates to all cells of the row it belongs to
• col: The header relates to all cells of the column it belongs to
• rowgroup: The header belongs to a rowgroup and relates to all of its cells
• colgroup: The header belongs to a colgroup and relates to all of its cells

Global attributes

accesskey Specifies a keyboard shortcut to activate or focus an element.

aria-* Defines accessibility properties and states for assistive technologies.

class Specifies one or more CSS class names for styling the element.

data-* Stores custom data private to the page or application.

dir Sets the text direction (left-to-right, right-to-left, or auto).

hidden Hides the element from display and assistive technologies.

id Defines a unique identifier for the element within the document.

inputmode Hints which virtual keyboard type to display on mobile devices.

itemid Provides a global identifier for microdata items.

itemprop Defines a property name-value pair for microdata.

itemref Associates properties with an item via element IDs for microdata.

itemscope Creates a new microdata item container.

itemtype Specifies the vocabulary URL for microdata items (like Schema.org).

lang Specifies the primary language of the element’s content.

nonce Provides a cryptographic nonce for Content Security Policy.

role Defines the element’s semantic role for accessibility.

tabindex Controls keyboard navigation order and focusability.

title Provides advisory information displayed as a tooltip.

Example

<table>
  <caption>IndieWeb Community Growth by Region</caption>
  <thead>
    <tr>
      <th scope="col">Region</th>
      <th scope="colgroup" colspan="3">2023 Statistics</th>
      <th scope="colgroup" colspan="3">2024 Statistics</th>
    </tr>
    <tr>
      <th scope="col">Area</th>
      <th scope="col">Events</th>
      <th scope="col">Attendees</th>
      <th scope="col">New Sites</th>
      <th scope="col">Events</th>
      <th scope="col">Attendees</th>
      <th scope="col">New Sites</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">North America</th>
      <td>12</td>
      <td>240</td>
      <td>85</td>
      <td>15</td>
      <td>310</td>
      <td>120</td>
    </tr>
    <tr>
      <th scope="row">Europe</th>
      <td>18</td>
      <td>360</td>
      <td>140</td>
      <td>22</td>
      <td>445</td>
      <td>185</td>
    </tr>
    <tr>
      <th scope="row">Asia Pacific</th>
      <td>6</td>
      <td>95</td>
      <td>32</td>
      <td>9</td>
      <td>165</td>
      <td>58</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Total</th>
      <th scope="col">36</th>
      <th scope="col">695</th>
      <th scope="col">257</th>
      <th scope="col">46</th>
      <th scope="col">920</th>
      <th scope="col">363</th>
    </tr>
  </tfoot>
</table>

<table>
  <caption>Personal Website Technology Stack Comparison</caption>
  <thead>
    <tr>
      <th scope="col">Category</th>
      <th scope="col">Simple</th>
      <th scope="col">Intermediate</th>
      <th scope="col">Advanced</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="rowgroup" rowspan="3">Static Site Generators</th>
      <th scope="row">Jekyll</th>
      <td>GitHub Pages</td>
      <td>Custom plugins</td>
    </tr>
    <tr>
      <th scope="row">Hugo</th>
      <td>Fast builds</td>
      <td>Custom themes</td>
    </tr>
    <tr>
      <th scope="row">Eleventy</th>
      <td>Simple setup</td>
      <td>Multiple templates</td>
    </tr>
  </tbody>
</table>