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 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 Create Header Cell in a Table using HTML? A header cell in a table made with <th> tag is used to label columns or rows, helping organize information. To create a header cell in an HTML table, use the <th> element. Header cells typically contain titles for each column or row, and they are bold by default.Syntax<th> Contents 1 min read How to Convert HTML Table to JSON in JavaScript? HTML tables are commonly used to present structured data on websites. In many scenarios, this tabular data needs to be converted to JSON format for processing, storage, or server communication. We will discuss different approaches to converting HTML tables to JSON using JavaScript.These are the foll 3 min read How to make Basic Header markup using jQuery Mobile ? jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will be making Basic Header markup using jQuery Mobile. Approach: First, add jQuery Mobile scripts needed for your project. <link rel="styles 1 min read Like