HTMLTableCellElement: headers property

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨July 2015⁩.

Theheaders property of theHTMLTableCellElement interfacecontains a list of IDs of<th> elements that areheaders for this specific cell.

Value

A string containing space-separated IDs.

Examples

This example lists the ID of the last clicked cell of the table:

HTML

html

<table>  <thead>    <tr>      <th rowspan="2">Homework (ID = h)</th>      <th colspan="3">Exams (ID = e)</th>      <th colspan="3">Projects (ID = p)</th>    </tr>  </thead>  <tbody>    <tr>      <th headers="e">1 (ID = e1)</th>      <th headers="e">2 (ID = e2)</th>      <th headers="e">Final (ID = ef)</th>      <th headers="p">1 (ID = p1)</th>      <th headers="p">2 (ID = p2)</th>      <th headers="p">Final (ID = pf)</th>    </tr>    <tr>      <td headers="h">15%</td>      <td headers="e e1">15%</td>      <td headers="e e2">15%</td>      <td headers="e ef">20%</td>      <td headers="p p1">10%</td>      <td headers="p p2">10%</td>      <td headers="p pf">15%</td>    </tr>  </tbody></table>IDs of headers of the last clicked cell: <output>none</output>.

table {  border-collapse: collapse;}th,td,table {  border: 1px solid black;}button {  margin: 1em 1em 1em 0;}

JavaScript

const table = document.querySelector("table");const output = document.querySelector("output");table.addEventListener("click", (ev) => {  output.textContent = ev.target.headers ? ev.target.headers : "none";});