headers

headers attribute

The headers attribute in HTML is applied to table cells (<td> or <th> elements) to link a cell with one or more header cells. This attribute enhances table accessibility by aiding screen readers and other assistive technologies in understanding the relationships among various table parts. The value of the headers attribute consists of a space-separated list of IDs corresponding to <th> elements that serve as headers for the cell.

Syntax

<tagname headers="header-ids">

Example

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>

Values

• header-ids
  • A string of table header IDs, separated by spaces.

Applies To

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

• <td>
• <th>

Example

<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>

Conclusion

The headers attribute improves accessibility by linking table cells to header cells, aiding screen readers and assistive technologies. It helps clarify the relationship between data and headers within a table. This attribute can be applied to both <td> and <th> elements for better semantic structure.