HTML <th> headers Attribute

The headers attribute on a <th> tag points to one or more table header cells which the current header cell is related to. The headers setting has no visual effect.

Example

#

A headers attribute on 2 <th> elements.
Both second row header cells are related to the first row header cell.

Online Customers
First name Last name
Denice Templeman
Paulo Cornell
Maria Larsson
<style>
  table.tbl { width: 300px; border-collapse: collapse; }
  .tbl th { background-color:aliceblue; }
  .tbl th, .tbl td { border: solid 1px #777; padding: 5px; }
  #online { background-color:lightblue; }
</style>

<table class="tbl">
  <tr>
    <th id="online" colspan="2">Online Customers</th>
  </tr>
  <tr>
    <th headers="online">First name</th>
    <th headers="online">Last name</th>
  </tr>
  <tr>
    <td>Denice</td>
    <td>Templeman</td>
  </tr>
  <tr>
    <td>Paulo</td>
    <td>Cornell</td>
  </tr>
  <tr>
    <td>Maria</td>
    <td>Larsson</td>
  </tr>
</table>

Using headers

The headers attribute specifies which table header cells are related to the current header cell.

This attribute accepts a space-separated string of table header ids.

The headers setting has no visual effect. It is used by screen readers, search engines, JavaScript, etc.


Syntax

<th headers="header-id">

Values

#

Value Description
header-id Space-separated string of table header ids.

Browser support

Here is when headers support started for each browser:

Chrome
1.0 Sep 2008
Firefox
1.0 Sep 2002
IE/Edge
1.0 Aug 1995
Opera
1.0 Jan 2006
Safari
1.0 Jan 2003

You may also like

 Back to <th>
Guides