The headers attribute is used in (data cell) element to associate data cells with their corresponding (header cell) header cells.
Definition and Usage
➔ It is mainly used for accessibility.
➔ The headers attribute has no visual effect on the page.
Syntax
//In HTML
<table>
<tr>
<th id="id">ID</th>
<th id="name">Name</th>
<th id="email">Email</th>
</tr>
<tr>
<td id="cellid" headers="name">M122</td>
<td headers="name">Maria</td>
<td headers="email">maria@example.com</td>
</tr>
<tr>
<td headers="name">A205</td>
<td headers="name">Helen</td>
<td headers="email">helen@example.com</td>
</tr>
</table>
//In JavaScript
const element = document.getElementById("cellid");
let header = element.headers;
element.getAttribute("headers");
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML headers attribute example</title>
<style>
table {
border-collapse: collapse;
width: 50%;
margin: auto;
margin-top: 50px;
}
td,
th {
border: 1px solid #00000055;
text-align: center;
padding: 8px;
}
tr:nth-child(even) {
background-color: #f1f1f1;
}
</style>
</head>
<body onsubmit="submit(event)">
<div id="sample" class="mydiv">
<h3>HTML headers attribute example</h3>
<p>The headers attribute is used to associate data cells with their corresponding header cells. It has no visual
effects.</p>
<table>
<tr>
<th id="id">ID</th>
<th id="name">Name</th>
<th id="email">Email</th>
</tr>
<tr>
<td class="cell" headers="id"><i>M122</i></td>
<td class="cell" headers="name">Maria</td>
<td class="cell" headers="email">maria@example.com</td>
</tr>
<tr>
<td headers="id">A205</td>
<td headers="name">Helen</td>
<td headers="email">helen@example.com</td>
</tr>
</table>
</div>
<script>
const elements = document.querySelectorAll('.cell');
let arr = [];
elements.forEach(element => {
arr.push(element.headers);
});
alert("Headers are: " + arr);
</script>
</body>
</html>
Try it Now »
Click on the "Try it Now" button to see how it works.
Definition and Usage
➔ It is mainly used for accessibility.
➔ The headers attribute has no visual effect on the page.
Syntax
//In HTML
<table>
<tr>
<th id="id">ID</th>
<th id="name">Name</th>
<th id="email">Email</th>
</tr>
<tr>
<td id="cellid" headers="name">M122</td>
<td headers="name">Maria</td>
<td headers="email">maria@example.com</td>
</tr>
<tr>
<td headers="name">A205</td>
<td headers="name">Helen</td>
<td headers="email">helen@example.com</td>
</tr>
</table>
//In JavaScript
const element = document.getElementById("cellid");
let header = element.headers;
element.getAttribute("headers");
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML headers attribute example</title>
<style>
table {
border-collapse: collapse;
width: 50%;
margin: auto;
margin-top: 50px;
}
td,
th {
border: 1px solid #00000055;
text-align: center;
padding: 8px;
}
tr:nth-child(even) {
background-color: #f1f1f1;
}
</style>
</head>
<body onsubmit="submit(event)">
<div id="sample" class="mydiv">
<h3>HTML headers attribute example</h3>
<p>The headers attribute is used to associate data cells with their corresponding header cells. It has no visual
effects.</p>
<table>
<tr>
<th id="id">ID</th>
<th id="name">Name</th>
<th id="email">Email</th>
</tr>
<tr>
<td class="cell" headers="id"><i>M122</i></td>
<td class="cell" headers="name">Maria</td>
<td class="cell" headers="email">maria@example.com</td>
</tr>
<tr>
<td headers="id">A205</td>
<td headers="name">Helen</td>
<td headers="email">helen@example.com</td>
</tr>
</table>
</div>
<script>
const elements = document.querySelectorAll('.cell');
let arr = [];
elements.forEach(element => {
arr.push(element.headers);
});
alert("Headers are: " + arr);
</script>
</body>
</html>
Click on the "Try it Now" button to see how it works.