HTML DOM TableHeader headers Property
Last Updated :
24 Aug, 2022
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 >
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 >
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 >
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 >
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:
Supported Browsers:
- Google Chrome
- Firefox
- Opera
- Safari
- Internet Explorer/Edge
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...