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.
The headers
property of the HTMLTableCellElement
interface
contains a list of IDs of <th>
elements that are headers 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>
<tr>
<th rowspan="2" id="h">Homework (ID = h)</th>
<th colspan="3" id="e">Exams (ID = e)</th>
<th colspan="3" id="p">Projects (ID = p)</th>
</tr>
<tr>
<th id="e1" headers="e">1 (ID = e1)</th>
<th id="e2" headers="e">2 (ID = e2)</th>
<th id="ef" headers="e">Final (ID = ef)</th>
<th id="p1" headers="p">1 (ID = p1)</th>
<th id="p2" headers="p">2 (ID = p2)</th>
<th id="pf" 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>
</table>
IDs of headers of the last clicked cell: <output>none</output>.
JavaScript
js
const table = document.querySelector("table");
const output = document.querySelector("output");
table.addEventListener("click", (ev) => {
output.textContent = ev.target.headers ? ev.target.headers : "none";
});
Result
Specifications
Specification |
---|
HTML Standard # dom-tdth-headers |
Browser compatibility
BCD tables only load in the browser