The HTML DOM TableHeader headers property is used to set or return the value of the headers attribute. The header’s attribute is used to specify the table cell containing header information for the current header cell.
Syntax
- It returns the header’s property.
tableheaderObject.headers
- It is used to set the header’s property.
tableheaderObject.headers = header_ids
Property Values: It contains the value i.e header_ids which specify the separated list of id’s to one or more header cell.
Return Value: It returns a string value that represents the separated list of header-list id’s.
Example 1: This example returns a header’s property.
HTML
<!DOCTYPE html><html>
<head>
<!-- style to set border -->
<style>
table
{
border: 2px solid black;
}
td
{
border: 1px dotted green;
}
</style>
</head>
<body>
<h2>GeeksforGeeks</h2>
<b>DOM TableHeader headers property</b>
<table>
<tr>
<th id="tableHeaderID" headers="username">
Username
</th>
</tr>
<tr>
<td>Sachin</td>
<td>Suraj</td>
<td>Gauri</td>
</tr>
</table>
<br>
<button onclick="getHeader()">
Click to get table header
</button>
<p id="paraID" style="font-size:20px;color:green">
</p>
<!-- Script to return TableHeader headers Property -->
<script>
function getHeader() {
var tab = document.getElementById("tableHeaderID").headers;
document.getElementById("paraID").innerHTML = tab;
}
</script>
</body>
</html>
|
Output:
Example 2: Below code demonstrates the setting of the header’s property.
HTML
<!DOCTYPE html><html>
<head>
<!-- style to set border -->
<style>
table
{
border: 2px solid black;
}
td
{
border: 1px dotted green;
}
</style>
</head>
<body>
<h2>GeeksforGeeks</h2>
<b>DOM TableHeader headers property</b>
<table>
<tr>
<th id="tableHeaderID" headers="username">
Username
</th>
</tr>
<tr>
<td>Sachin</td>
<td>Suraj</td>
<td>Gauri</td>
</tr>
</table>
<br>
<button onclick="getHeader()">
Click to get table header value
</button>
<p id="paraID" style="font-size:18px;color:green">
</p>
<!-- Script to set the TableHeader headers Property -->
<script>
function getHeader() {
var tab = document.getElementById(
"tableHeaderID").headers = "user_firstname";
document.getElementById("paraID").innerHTML =
"The value of the headers attribute was changed to: " + tab;
}
</script>
</body>
</html>
|
Output:
- Google Chrome
- Firefox
- Opera
- Safari
- Internet Explorer/Edge