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 deleteTHead() Method
The HTML DOM Table deleteTHead() method removes the <thead> element and its content from a table. This method is useful for dynamically manipulating table headers in web applications.
Syntax
Following is the syntax for the deleteTHead() method −
table.deleteTHead()
Parameters
This method does not accept any parameters.
Return Value
The method returns undefined. It simply removes the <thead> element from the table if it exists.
Example
Following example demonstrates how to use the deleteTHead() method to remove a table header −
<!DOCTYPE html>
<html>
<head>
<title>DOM Table deleteTHead() Method</title>
<style>
body {
font-family: Arial, sans-serif;
background: lightblue;
padding: 20px;
text-align: center;
}
table {
margin: 20px auto;
border-collapse: collapse;
background: white;
}
th, td {
padding: 10px;
text-align: left;
}
.btn {
background: #dc3545;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
margin: 10px;
border-radius: 4px;
}
</style>
</head>
<body>
<h1>DOM Table deleteTHead() Method Demo</h1>
<table border="2" id="myTable">
<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>
</table>
<button onclick="removeHeader()" class="btn">Remove Header</button>
<button onclick="addHeader()" class="btn">Add Header</button>
<script>
function removeHeader() {
var table = document.getElementById('myTable');
table.deleteTHead();
}
function addHeader() {
var table = document.getElementById('myTable');
if (!table.tHead) {
var header = table.createTHead();
var row = header.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = "<strong>Name</strong>";
cell2.innerHTML = "<strong>Roll No.</strong>";
}
}
</script>
</body>
</html>
The output shows a table with header initially. Clicking "Remove Header" removes the thead element, and clicking "Add Header" recreates it −
Initial table: Name | Roll No. ------------|---------- John | 071717 Jane | 031717 After clicking "Remove Header": John | 071717 Jane | 031717
Multiple Headers Example
Following example shows what happens when a table has multiple thead elements −
<!DOCTYPE html>
<html>
<head>
<title>Multiple Headers Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Table with Multiple Headers</h2>
<table border="1" id="multiTable">
<thead>
<tr>
<th>Product</th>
<th>Price</th>
</tr>
</thead>
<thead>
<tr>
<th>Category</th>
<th>Stock</th>
</tr>
</thead>
<tbody>
<tr>
<td>Laptop</td>
<td>$999</td>
</tr>
</tbody>
</table>
<button onclick="deleteFirstHeader()" style="padding: 8px; margin: 10px;">Delete First Header</button>
<script>
function deleteFirstHeader() {
var table = document.getElementById('multiTable');
table.deleteTHead(); // Only removes the first thead
}
</script>
</body>
</html>
Note that deleteTHead() only removes the first <thead> element if multiple exist −
Before deletion: Product | Price Category | Stock ------------|------- Laptop | $999 After deletion: Category | Stock ------------|------- Laptop | $999
Key Points
The deleteTHead() method removes only the first
<thead>element from the table.If no
<thead>element exists, the method does nothing and does not throw an error.The method removes the entire
<thead>element including all its child<tr>elements.This method is commonly used in dynamic table manipulation scenarios.
Browser Compatibility
The deleteTHead() method is supported in all major browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer. It is part of the standard DOM Level 2 HTML specification.
Common Use Cases
Dynamic table generation − Removing headers when switching between different data views.
Table customization − Allowing users to toggle table headers on/off.
Data processing − Programmatically cleaning up table structure before processing data.
Conclusion
The HTML DOM Table deleteTHead() method provides a simple way to remove table headers dynamically. It removes only the first thead element and is useful for creating interactive tables where header visibility can be controlled programmatically.
130 Views
