HTML headers Attribute

The headers attribute on a table cell element points to one or more table header cells that the current table cell is related to. The headers setting has no visual effect. Elements that accept this attribute include <td>, and <th>.

Example

#

A headers attribute on 6 <td> elements.
Each data cell references its corresponding table header cell.

Name Country
Christina Berglund Sweden
Maria Larsson Sweden
<style>
  table.tb { width: 300px; border-collapse: collapse; }
  .tb th { background-color:lightblue; }
  .tb th, .tb td { border: solid 1px #777; padding: 5px; }
</style>

<table class="tb">
   <tr> 
      <th id="name" colspan="2">Name</th>
      <th id="country">Country</th>
   </tr>
   <tr> 
      <td headers="name">Christina</td>
      <td headers="name">Berglund</td>
      <td headers="country">Sweden</td>
   </tr>
   <tr> 
      <td headers="name">Maria</td>
      <td headers="name">Larsson</td>
      <td headers="country">Sweden</td>
   </tr>
</table>

For additional details see our HTML td headers Reference.


Using headers

The headers attribute specifies which table header cells are related to the current table 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

<tagname headers="header-ids" >

Values

#

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

Elements that accept headers

The following elements accept the headers attribute.

Elements Description
<td> Specifies a standard table cell -- see example above
<th> Specifies a header cell.

<th> with headers

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>

For additional details see our HTML th headers Reference.


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



Guides