How to Append Header to a HTML Table in JavaScript ?

Last Updated : 01 Feb, 2024

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.

Approach

In this approach, we are using create elements along with DOM manipulation. we will follow these steps:

Create the HTML table: Set up the basic HTML structure with a table containing existing headers and rows. Add a button element with a unique ID to trigger the header appending functionality.
Include the Styling: Optionally, apply CSS styles for better presentation. In this example, we have added simple styling to the table and button.
Set Up JavaScript Event Handling: Use JavaScript to get the table element by its ID. Add an event listener to the button to respond to clicks by DOM manipulation.
Define the JavaScript Logic for Appending Headers: Inside the event listener function we will use these-
1. Create a new header row (tr element).
2. Create individual header cells (th elements) with desired text content.
3. Append the header cells to the header row.
4. Append the new header row to the thead section of the table.

Example: This example shows the implementation of the above-explained approach.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
"width=device-width">
    <title>Header Appended in
         HTML table using JS</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
 
        html,
        body {
            height: 100%;
            width: 100%;
        }
 
        table,
        td,
        th {
            border: 2px solid black;
            padding: 5px;
            font-size: 15px;
            font-weight: 800;
            font-family: sans-serif;
        }
 
        #appendHeaderButton {
            margin: 5px 80px;
            background-color: #dfdfdf;
            padding: 10px 20px;
            border-radius: 16px;
            font-size: 10px;
            font-weight: 600;
 
        }
    </style>
</head>
 
<body>
    <table id="myTable">
        <thead>
            <tr>
                <th>I Column</th>
                <th>II Column</th>
                <th>III Column</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>cell (1,1)</td>
                <td>cell (1,2)</td>
                <td>cell (1,3)</td>
            </tr>
            <tr>
                <td>cell (2,1)</td>
                <td>cell (2,2)</td>
                <td>cell (2,3)</td>
            </tr>
            <tr>
                <td>cell (3,1)</td>
                <td>cell (3,2)</td>
                <td>cell (3,3)</td>
            </tr>
        </tbody>
    </table>
 
    <!-- Add a button with an ID for JavaScript to reference -->
    <button id="appendHeaderButton">Append Header</button>
 
    <script>
        //Get the table by its ID
        var table = document.getElementById("myTable");
 
        // Add an event listener to the button
        document.getElementById("appendHeaderButton")
            .addEventListener("click", function () {
                // new header row creation
                let headerRow = document.createElement("tr");
 
                let headerCell1 = document.createElement("th");
                headerCell1.textContent = "New Header I";
 
                let headerCell2 = document.createElement("th");
                headerCell2.textContent = "New Header II";
 
                let headercell3 = document.createElement("th");
                headercell3.textContent = "New Header III";
 
                // Add header cells to the header row
                headerRow.appendChild(headerCell1);
                headerRow.appendChild(headerCell2);
                headerRow.appendChild(headercell3);
 
                // Append the new header row to the table.
                table.getElementsByTagName("thead")[0]
                    .appendChild(headerRow);
            });
    </script>
</body>
 
</html>