Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM TableData headers Property
The HTML DOM TableData headers property returns and modifies the value of the headers attribute of a table cell (<td>) element. The headers attribute associates data cells with their corresponding header cells, improving table accessibility for screen readers.
Syntax
Following is the syntax for returning the headers attribute value −
object.headers
Following is the syntax for setting the headers attribute value −
object.headers = "header_ids"
Parameters
The header_ids parameter is a space-separated list of header cell IDs that describe the current data cell. Each ID should correspond to a <th> element's ID attribute.
Return Value
The property returns a string containing the space-separated list of header IDs associated with the table data cell. If no headers are defined, it returns an empty string.
Example − Getting Headers Value
Following example demonstrates how to retrieve the headers attribute value from a table cell −
<!DOCTYPE html>
<html>
<head>
<title>TableData headers Property</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
background-color: #f5f5f5;
}
table {
border-collapse: collapse;
margin: 20px auto;
background-color: white;
}
th, td {
border: 1px solid #ddd;
padding: 12px;
text-align: center;
}
th {
background-color: #4CAF50;
color: white;
}
.btn {
background-color: #2196F3;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
margin: 10px;
}
.result {
font-size: 18px;
margin: 20px;
padding: 10px;
background-color: #e7f3ff;
border-left: 4px solid #2196F3;
}
</style>
</head>
<body>
<h1>DOM TableData headers Property Demo</h1>
<table>
<thead>
<tr>
<th id="student-name">Student Name</th>
<th id="roll-number">Roll Number</th>
<th id="grade">Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td headers="student-name">John Smith</td>
<td headers="roll-number">12345</td>
<td headers="grade">A</td>
</tr>
<tr>
<td headers="student-name" id="jane-cell">Jane Doe</td>
<td headers="roll-number">12346</td>
<td headers="grade">B+</td>
</tr>
</tbody>
</table>
<button onclick="getHeaders()" class="btn">Get Jane's Cell Headers</button>
<div id="output" class="result"></div>
<script>
function getHeaders() {
var cell = document.getElementById('jane-cell');
var headers = cell.headers;
document.getElementById('output').innerHTML =
'Headers value: "' + headers + '"';
}
</script>
</body>
</html>
The output shows the table with a button. Clicking the button displays the headers attribute value −
Headers value: "student-name"
Example − Setting Headers Value
Following example demonstrates how to modify the headers attribute value using JavaScript −
<!DOCTYPE html>
<html>
<head>
<title>Setting TableData headers Property</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
table {
border-collapse: collapse;
margin: 20px auto;
}
th, td {
border: 1px solid #ccc;
padding: 10px;
text-align: center;
}
th {
background-color: #f0f0f0;
}
.btn {
background-color: #ff6b6b;
color: white;
padding: 8px 16px;
border: none;
border-radius: 3px;
cursor: pointer;
margin: 5px;
}
</style>
</head>
<body>
<h1>Modifying Headers Property</h1>
<table>
<thead>
<tr>
<th id="product">Product</th>
<th id="price">Price</th>
<th id="category">Category</th>
</tr>
</thead>
<tbody>
<tr>
<td id="laptop-cell" headers="product">Laptop</td>
<td headers="price">$999</td>
<td headers="category">Electronics</td>
</tr>
</tbody>
</table>
<button onclick="showCurrentHeaders()" class="btn">Show Current Headers</button>
<button onclick="addHeaders()" class="btn">Add Multiple Headers</button>
<button onclick="clearHeaders()" class="btn">Clear Headers</button>
<p id="status"></p>
<script>
function showCurrentHeaders() {
var cell = document.getElementById('laptop-cell');
document.getElementById('status').innerHTML =
'Current headers: "' + cell.headers + '"';
}
function addHeaders() {
var cell = document.getElementById('laptop-cell');
cell.headers = 'product price category';
document.getElementById('status').innerHTML =
'Headers updated to: "' + cell.headers + '"';
}
function clearHeaders() {
var cell = document.getElementById('laptop-cell');
cell.headers = '';
document.getElementById('status').innerHTML =
'Headers cleared. Current value: "' + cell.headers + '"';
}
</script>
</body>
</html>
This example shows how to get, set, and clear the headers attribute. The buttons demonstrate different operations on the headers property.
How It Works
The headers property works by creating associations between data cells and header cells. When a screen reader encounters a data cell, it can announce the associated headers to provide context. This is particularly useful for complex tables where the relationship between headers and data might not be obvious.
For proper accessibility, each header cell should have a unique id attribute, and data cells should reference these IDs in their headers attribute using a space-separated list.
Key Points
-
The headers property accepts a space-separated list of header cell IDs.
-
Header cells must have unique
idattributes for proper association. -
This property is primarily used for accessibility and screen reader support.
-
An empty string removes all header associations from a data cell.
-
Complex tables with multiple levels of headers benefit most from this property.
Conclusion
The DOM TableData headers property provides a way to programmatically manage the association between data cells and their corresponding header cells. This enhances table accessibility and is particularly valuable for complex tables where relationships between headers and data need to be explicitly defined for assistive technologies.
137 Views
