HTML DOM Table Object

Last Updated : 01 Oct, 2024

The HTML DOM Table object represents an HTML <table> element in the Document Object Model (DOM). It provides properties and methods to manipulate tables, such as adding or deleting rows and columns, accessing individual cells, or modifying the table's structure dynamically.

Syntax:

To access table element.:

document.getElementById("id");

To create a table object:

document.createElement("TABLE");

Properties:

rows: Returns a collection of all <tr> elements (rows) in the table.
tBodies: Returns a collection of all <tbody> elements in the table.
caption: Gets or sets the <caption> element of the table.
tHead: Gets or sets the <thead> element of the table.
tFoot: Gets or sets the <tfoot> element of the table.

Methods:

createTHead(): Creates a <thead> element in the table.
deleteTHead(): Removes the <thead> element from the table.
createTFoot(): Creates a <tfoot> element in the table.
deleteTFoot(): Removes the <tfoot> element from the table.
insertRow(index): Inserts a new row at the specified index.
deleteRow(index): Deletes a row at the specified index.

Example 1: The below example accessing table and add row new row in table element.

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>HTML Table Object </title>
</head>

<body>
    <table id="myTable" border="1">
        <thead>
            <tr>
                <th>Header 1</th>
                <th>Header 2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Row 1, Cell 1</td>
                <td>Row 1, Cell 2</td>
            </tr>
        </tbody>
    </table>
    <button onclick="addRow()">Add Row</button>

    <script>
        function addRow() {
            // Get the table by its ID
            let table = document.getElementById("myTable");

            // Insert a new row at the end of the table
            let newRow = table.insertRow();

            // Insert cells in the new row
            let cell1 = newRow.insertCell(0);
            let cell2 = newRow.insertCell(1);

            // Add text content to the new cells
            cell1.textContent = "New Row, Cell 1";
            cell2.textContent = "New Row, Cell 2";
        }
    </script>
</body>

</html>

Output:

Example 2: Creating a table element and add new row using JavaScript.

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table Object Example</title>
</head>

<body>
    <button onclick="addRow()">Add Row</button>

    <script>
        // Create table element
        let table = document.createElement("TABLE");
        table.setAttribute("id", "MyTable");
        table.setAttribute("border", "1");
        document.body.appendChild(table);

        // Create header row
        let headerRow = document.createElement("TR");
        let headerCell1 = document.createElement("TH");
        let headerCell2 = document.createElement("TH");

        headerCell1.textContent = "Header 1";
        headerCell2.textContent = "Header 2";

        headerRow.appendChild(headerCell1);
        headerRow.appendChild(headerCell2);

        // Add header row to the table
        table.appendChild(headerRow);

        function addRow() {
            // Get the table element by its ID
            let table = document.getElementById("MyTable");

            // Check if the table exists
            if (!table) {
                alert("Please create the table first.");
                return;
            }

            // Insert a new row at the end of the table
            let newRow = document.createElement("TR");

            // Insert cells in the new row
            let cell1 = document.createElement("TD");
            let cell2 = document.createElement("TD");

            // Add text content to the new cells
            cell1.textContent = "New Row, Cell 1";
            cell2.textContent = "New Row, Cell 2";

            // Append cells to the new row
            newRow.appendChild(cell1);
            newRow.appendChild(cell2);

            // Append the new row to the table
            table.appendChild(newRow);
        }
    </script>
</body>

</html>

Output:

Supported Browsers:

Opera
Google Chrome
Firefox
Apple Safari

HTML | DOM MouseEvent offsetX Property

Shubrodeep Banerjee

Improve

Article Tags :

HTML DOM Table Object

Syntax:

Properties:

Methods:

Supported Browsers:

Similar Reads

Thank You!

What kind of Experience do you want to share?