The headers attribute in HTML <td> is used to associate a data cell with one or more header cells (<th>). It improves accessibility by helping screen readers understand which headers belong to the table data.
- Used inside the <td> tag.
- Connects a data cell to related <th> elements.
- The value of headers should match the id of <th> cells.
Syntax:
<td headers="header_id">- header_id: specify the space to the separated list of id to one or more Header cells that the table data cell is related to.
Example: Demonstrates the usage of the <td> headers attribute for associating data cells with header cells in a table, enhancing accessibility and aiding screen readers in interpreting tabular data.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 1px solid green;
}
</style>
</head>
<body>
<h2>
HTML <td> Headers Attributes
</h2>
<!--Driver Code Ends-->
<table>
<tr>
<th id="name">Name</th>
<th id="father">Father's Name</th>
<th id="mother">Mother's Name</th>
<th id="phone">Phone No.</th>
</tr>
<tr>
<td headers="name">Ben</td>
<td headers="father">
Daniel
</td>
<td headers="mother">
Suzzane
</td>
<td headers="phone">12345</td>
</tr>
</table>
<!--Driver Code Starts-->
<br />
</body>
</html>
<!--Driver Code Ends-->