HTML <td> headers Attribute

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

Example

#

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

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>

Using headers

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

<td headers="header-id">

Values

#

Value Description
header-ids 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 <td>
Guides