HTML Table Header: The <th> Tag Explained

Table of Contents

HTML `<th>` Tag

The <th> tag in HTML defines a header cell within a table. It's primarily used to label columns or rows, providing context and structure to the table data. Screen readers and search engines also rely on <th> elements to understand the organization of your table, thus improving accessibility and SEO.

Syntax

<th 
    abbr="text"
    align="left|center|right|justify|char"
    axis="text"
    bgcolor="color_name|hex_number|rgb_number"
    char="character"
    charoff="length"
    colspan="number"
    headers="headers_ids"
    height="pixels"
    nowrap
    rowspan="number"
    scope="col|colgroup|row|rowgroup"
    valign="top|middle|bottom|baseline"
    width="pixels|%"
>
    Header Content
</th>

Attributes

Attribute	Value	Description
`abbr`	text	Specifies an abbreviated version of the header cell's content. This is helpful for assistive technologies and when space is limited.
`align`	`left` `center` `right` `justify` `char`	Specifies the horizontal alignment of the content within the header cell. (Deprecated in HTML5, use CSS instead)
`axis`	text	Specifies the axis related to the header cell. (Deprecated in HTML5)
`bgcolor`	color_name hex_number rgb_number	Specifies the background color of the header cell. (Deprecated in HTML5, use CSS instead)
`char`	character	Specifies the alignment character for the content. (Deprecated in HTML5)
`charoff`	length	Specifies the number of characters the content will be offset from the alignment character. (Deprecated in HTML5)
`colspan`	number	Specifies the number of columns a header cell should span.
`headers`	headers_ids	Specifies one or more header cells a header cell is related to.
`height`	pixels	Specifies the height of the header cell. (Deprecated in HTML5, use CSS instead)
`nowrap`	`nowrap`	Specifies that the content inside the header cell should not wrap. (Deprecated in HTML5, use CSS instead)
`rowspan`	number	Specifies the number of rows a header cell should span.
`scope`	`col` `colgroup` `row` `rowgroup`	Specifies the cells the header cell is a header for.
`valign`	`top` `middle` `bottom` `baseline`	Specifies the vertical alignment of the content within the header cell. (Deprecated in HTML5, use CSS instead)
`width`	pixels %	Specifies the width of the header cell. (Deprecated in HTML5, use CSS instead)

Example

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>Occupation</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>30</td>
    <td>Engineer</td>
  </tr>
  <tr>
    <td>Jane Smith</td>
    <td>25</td>
    <td>Designer</td>
  </tr>
</table>

More Examples

Using scope attribute:

The scope attribute clarifies which cells the header applies to.

<table>
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Age</th>
      <th scope="col">Occupation</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>30</td>
      <td>Engineer</td>
    </tr>
    <tr>
      <td>Jane Smith</td>
      <td>25</td>
      <td>Designer</td>
    </tr>
  </tbody>
</table>

Using colspan and rowspan attributes:

<table>
  <tr>
    <th rowspan="2">Details</th>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>30</td>
  </tr>
  <tr>
    <th colspan="3">Additional Information</th>
  </tr>
    <tr>
        <td>Occupation</td>
        <td colspan="2">Engineer</td>
    </tr>
</table>

Accessibility with abbr attribute:

<table>
    <tr>
      <th abbr="Product Name">Product</th>
      <th abbr="Unit Price">Price</th>
      <th abbr="Qty in Stock">Stock</th>
    </tr>
    <tr>
      <td>Laptop</td>
      <td>$1200</td>
      <td>50</td>
    </tr>
</table>

Using headers attribute for complex tables:

<table>
  <tr>
    <th id="h1"></th>
    <th id="h2">Q1</th>
    <th id="h3">Q2</th>
  </tr>
  <tr>
    <th id="r1">Sales</th>
    <td headers="h1 h2 r1">100</td>
    <td headers="h1 h3 r1">150</td>
  </tr>
  <tr>
    <th id="r2">Expenses</th>
    <td headers="h1 h2 r2">50</td>
    <td headers="h1 h3 r2">70</td>
  </tr>
</table>

Browser Support

The <th> tag is supported by all major browsers:

Chrome
Edge
Firefox
Safari
Opera

Notes and Tips

Always use <th> for table headers instead of <td>, this is crucial for accessibility.
Use the scope attribute (col, row, colgroup, or rowgroup) to specify the relationship between header cells and data cells, particularly for more complex tables.
Avoid using deprecated attributes like align, bgcolor, height, width directly on the <th> tag. Use CSS for styling instead.
For accessibility, it's a good practice to use the abbr attribute in complex tables. It helps when the full header text isn't displayed.
Complex tables should use the headers and id attributes to clarify which header cells relate to each data cell. This greatly enhances accessibility, particularly for screen readers.
Always wrap your <th> elements within a <tr> element.
Use semantic HTML, keep table markup clean and easy to understand.