How to hide the table header using JavaScript ? Last Updated : 28 Jun, 2023 Comments Improve Suggest changes Like Article Like Report In this article, we will see the methods to hide the table header using JavaScript. There are two approaches that can help to hide a table header with the help of JavaScript. They are discussed below: Using style and display propertyUsing jQuery hide Method Approach 1: Select the header using a CSS selector and modify the style property such that the value of the display property is set to none. This will hide the selected table header element from the page. Example: This example shows the use of the above-explained approach. html <!DOCTYPE html> <html lang="en"> <head> <title> How to hide the table header using JavaScript ? </title> <style> table, tr th, td { border: 1px solid black; } th, td { padding: 10px; } table { margin: auto; } </style> </head> <body style="text-align:center;"> <h1 style="color:green;"> GeeksforGeeks </h1> <table id="table"> <tr id="thead"> <th>S.No</th> <th>Title</th> </tr> <tr> <td>Geek_1</td> <td>GeekForGeeks</td> </tr> <tr> <td>Geek_2</td> <td>GeeksForGeeks</td> </tr> <tr> <td>Geek_3</td> <td>GeeksForGeeks</td> </tr> </table> <br> <button onclick="Geeks()"> Click Here </button> <p id="GFG"></p> <script> var elm = document.getElementById("GFG"); function Geeks() { let tableHead = document.getElementById("thead"); tableHead.style.display = "none"; elm.innerHTML = "Table header is hidden"; } </script> </body> </html> Output: Approach 2: Use jQuery to select the header to be hidden and use the hide() method on it. This jQuery method helps to hide the element on which it is used. Example: This example shows the use of the above-explained approach. HTML <!DOCTYPE html> <html lang="en"> <head> <title> How to hide the table header using JavaScript ? </title> <style> table, tr th, td { border: 1px solid black; } th, td { padding: 10px; } table { margin: auto; } </style> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"> </script> </head> <body style="text-align:center;"> <h1 style="color:green;"> GeeksforGeeks </h1> <table id="table"> <tr id="thead"> <th>S.No</th> <th>Title</th> </tr> <tr> <td>Geek_1</td> <td>GeekForGeeks</td> </tr> <tr> <td>Geek_2</td> <td>GeeksForGeeks</td> </tr> <tr> <td>Geek_3</td> <td>GeeksForGeeks</td> </tr> </table> <br> <button onclick="Geeks()"> Click Here </button> <p id="GFG"></p> <script> var elm = document.getElementById("GFG"); function Geeks() { $("#thead").hide(); elm.innerHTML = "Table header is hidden"; } </script> </body> </html> Output: Comment More infoAdvertise with us Next Article How to hide the table header using JavaScript ? P PranchalKatiyar Follow Improve Article Tags : JavaScript Web Technologies JavaScript-Questions Similar Reads How to Create Tab Headers using CSS & JavaScript? Tab headers are a commonly used user interface element in web development. They provide a way to organize content into distinct sections, allowing users to switch between them easily. Each tab represents a different category or topic, and clicking on a tab displays the corresponding content while hi 2 min read How to Create a Filter Table with JavaScript? Filter tables are commonly used in web applications to organize and display tabular data efficiently. It allows users to search and filter through large datasets easily. In this tutorial, we will go through the steps to create a filter table with JavaScript. ApproachFirst, create the basic HTML stru 3 min read How to remove the table row in a table using JavaScript ? Removing a table row in JavaScript involves targeting the row element by its index or unique identifier, then using the remove() method to delete it from the DOM. This updates the table dynamically without requiring a page reload. This can be done in two ways: Table of Content JavaScript remove() Me 3 min read How to Access <tr> element from Table using JavaScript ? Given an HTML table and the task is to access the table element from the Controller and highlight any row that we want. Approach: We will use a basic DOM operation in JavaScript to access table row element. We will be adding highlight class to the row that we click, if the highlight class is already 2 min read How to Append Header to a HTML Table in JavaScript ? JavaScript allows us to dynamically modify the structure of a table based on user interaction or other dynamic events. Here we will use JavaScript to dynamically create a Header row and then append it to the HTML table. ApproachIn this approach, we are using create elements along with DOM manipulati 3 min read How to make HTML table expand on click using JavaScript ? The expandable table can be achieved by using JavaScript with HTML. By Clicking on a row of the table, it expands and a sub-table pops up. When the user again clicks on that row the content will hide. This can be very useful when the data is complex but it is inter-related.Example 1: The following e 5 min read How to set the table layout algorithm using CSS ? You can set the table layout algorithm using table-layout property which is used to display the layout of the table. In this article, you learn both auto and fixed layout algorithms to form table. Syntax: table-layout: auto|fixed; Approach 1: Using auto layout algorithm. Note: In the auto-layout alg 2 min read JavaScript - Loop Through Table Cells using JS To loop through table cells in JavaScript, you can use various methods to iterate over the rows and cells in an HTML table. This allows you to manipulate or retrieve data from each cell as needed. Below are some practical approaches.1. Using the for LoopThe for loop is a simple and traditional way t 3 min read How to Remove Column from HTML Table using JavaScript ? Given an HTML table and the task is to remove the certain column from the HTML table. There are two approaches that are discussed below: Approach 1: First, select the table and also get the rows of table using table.rows. Get the number of columns of a row and go through each one of the columns. Use 3 min read How to Hide an HTML Element by Class using JavaScript? To hide an HTML element by class using JavaScript, the CSS display property can be manipulated.Below are the approaches to hide an HTML element by class:Table of ContentUsing getElementsByClassName() selectorUsing querySelectorAll() selectorApproach 1: Using getElementsByClassName() selectorIn this 3 min read Like