HTML headers Attribute

Description

The headers attribute in HTML is used in table cells (<td> or <th> elements) to associate the cell with one or more header cells. This attribute is particularly useful for creating accessible table data by helping screen readers and other assistive technologies understand the relationships between different parts of the table. The value of the headers attribute is a space-separated list of IDs of <th> elements that are considered headers for the cell.

By specifying header cells for data cells, you can provide additional context for the content of those data cells, making it easier for users of assistive technologies to navigate and understand complex tables. This is especially important in tables with multiple levels of headers or in situations where headers are not directly adjacent to their associated data cells.

For example, in a table that lists the sales figures by quarter for different regions, you might use the headers attribute to link the sales figures back to both the specific quarter and the specific region they relate to. This makes the table more accessible and the data within it more comprehensible to users relying on assistive technologies.

Here's a simple example illustrating the use of the headers attribute:

<table>
  <tr>
    <th id="product">Product</th>
    <th id="q1">Q1 Sales</th>
    <th id="q2">Q2 Sales</th>
  </tr>
  <tr>
    <td headers="product">Widgets</td>
    <td headers="q1">120</td>
    <td headers="q2">140</td>
  </tr>
  <tr>
    <td headers="product">Gadgets</td>
    <td headers="q1">80</td>
    <td headers="q2">110</td>
  </tr>
</table>

In this example, the headers attribute in each <td> element specifies which header(s) the cell is related to, improving the table's accessibility by making the relationship between headers and data clear.

Syntax

<tagname headers="header-ids">

Values

header-idsSpace-separated string of table header ids.

Applies To

The headers attribute can be used on the following html elements.

<td>
<th>

Example

HTML

<table border="1">

  <thead>

    <tr>

      <th id="header1">Name</th>

      <th id="header2">Age</th>

      <th id="header3" headers="header1 header2">City</th> </tr>

  </thead>

  <tbody>

    <tr>

      <td>Alice</td>

      <td>30</td>

      <td>New York</td>

    </tr>

    <tr>

      <td>Bob</td>

      <td>25</td>

      <td>London</td>

    </tr>

  </tbody>

</table>