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 Table tHead Property
The HTML DOM table tHead property returns the <thead> element of a table. This property provides access to the table's header section, allowing developers to manipulate or retrieve the header content programmatically.
Syntax
Following is the syntax for accessing the tHead property −
table.tHead
Return Value
The tHead property returns −
-
A
HTMLTableSectionElementrepresenting the<thead>element if it exists. -
nullif the table has no<thead>element.
Example − Accessing Table Header
Following example demonstrates how to use the tHead property to access and display the table header content −
<!DOCTYPE html>
<html>
<head>
<title>DOM Table tHead Property</title>
<style>
body {
font-family: Arial, sans-serif;
background: lightblue;
text-align: center;
padding: 20px;
}
table {
margin: 2rem auto;
border-collapse: collapse;
}
th, td {
padding: 8px;
border: 1px solid #333;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 4px;
width: 150px;
color: #fff;
cursor: pointer;
margin: 10px;
}
.show {
font-size: 1.2rem;
margin: 20px;
padding: 10px;
background: white;
border-radius: 4px;
}
</style>
</head>
<body>
<h1>DOM Table tHead Property Demo</h1>
<table id="myTable" border="2">
<thead>
<tr>
<th>Name</th>
<th>Roll No.</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>071717</td>
</tr>
<tr>
<td>Jane</td>
<td>031717</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Table Footer</td>
</tr>
</tfoot>
</table>
<button onclick="showThead()" class="btn">Show tHead</button>
<div id="result" class="show"></div>
<script>
function showThead() {
var table = document.getElementById('myTable');
var tableHeader = table.tHead;
if (tableHeader) {
document.getElementById("result").innerHTML =
"<strong>Table Header Content:</strong><br>" + tableHeader.innerHTML;
} else {
document.getElementById("result").innerHTML = "No table header found.";
}
}
</script>
</body>
</html>
When you click the "Show tHead" button, the content of the table header is displayed in the result area −
Table Header Content:
<tr>
<th>Name</th>
<th>Roll No.</th>
</tr>
Example − Checking if Table Has Header
Following example shows how to check if a table has a thead element before accessing it −
<!DOCTYPE html>
<html>
<head>
<title>Check Table Header</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Table with Header</h2>
<table id="table1" border="1">
<thead>
<tr><th>Product</th><th>Price</th></tr>
</thead>
<tbody>
<tr><td>Laptop</td><td>$999</td></tr>
</tbody>
</table>
<h2>Table without Header</h2>
<table id="table2" border="1">
<tbody>
<tr><td>Mouse</td><td>$25</td></tr>
</tbody>
</table>
<button onclick="checkHeaders()">Check Headers</button>
<div id="output"></div>
<script>
function checkHeaders() {
var table1 = document.getElementById('table1');
var table2 = document.getElementById('table2');
var result = "<h3>Header Check Results:</h3>";
result += "Table 1 has header: " + (table1.tHead !== null) + "<br>";
result += "Table 2 has header: " + (table2.tHead !== null) + "<br>";
document.getElementById('output').innerHTML = result;
}
</script>
</body>
</html>
This example demonstrates that the tHead property returns null for tables without a <thead> element −
Header Check Results: Table 1 has header: true Table 2 has header: false
Example − Modifying Table Header
Following example shows how to modify the table header using the tHead property −
<!DOCTYPE html>
<html>
<head>
<title>Modify Table Header</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<table id="dataTable" border="1" style="margin: 20px auto;">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
</tbody>
</table>
<button onclick="changeHeader()">Change Header Style</button>
<script>
function changeHeader() {
var table = document.getElementById('dataTable');
var header = table.tHead;
if (header) {
header.style.backgroundColor = '#4CAF50';
header.style.color = 'white';
header.style.fontWeight = 'bold';
}
}
</script>
</body>
</html>
Clicking the button changes the header background to green with white text, demonstrating how the tHead property can be used for styling modifications.
Key Points
-
The tHead property is read-only and returns the existing
<thead>element. -
If no
<thead>element exists, the property returnsnull. -
You can modify the style and content of the returned header element.
-
Always check if the tHead property is not null before accessing its properties or methods.
Browser Compatibility
The tHead property is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 9+. It is part of the standard DOM Level 2 HTML specification.
Conclusion
The HTML DOM table tHead property provides a convenient way to access and manipulate table headers. It returns the <thead> element if present, or null if the table lacks a header section. This property is essential for dynamic table manipulation and styling operations.
178 Views
