HTML DOM Table Object Last Updated : 01 Oct, 2024 Comments Improve Suggest changes Like Article Like Report 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:Add rowExample 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:create table with JSSupported Browsers:Opera Google ChromeFirefoxApple Safari Comment More infoAdvertise with us S Shubrodeep Banerjee Follow Improve Article Tags : Web Technologies HTML HTML-DOM Similar Reads HTML DOM Style display Property The HTML DOM Style display property is used to set or return the display type of an element. It is similar to the visibility property, which displays or hides the element. With a slight difference in display: none, hiding the entire element, while visibility: hidden meaning only the contents of the 3 min read HTML | DOM Input Submit Object The Input Submit object in HTML DOM represents the HTML <input> element with type = "submit" attribute. Syntax: It creates an Input Submit Object.document.createElement("INPUT")It is used to access an Input Submit Object.document.getElementById("id") Property Values: autofocus: It sets or retu 3 min read HTML | DOM Input URL Object The Input URL object in HTML DOM represents an <input> element with type = "url" attribute. The element with type url can be accessed by using getElementById() method. Syntax: document.getElementById("id"); where id is assigned to the <input> tag. Property Values: list: It returns the re 3 min read HTML DOM Window frames Properties The HTML DOM Window frames property in HTML DOM is used to return the frame element in the form of an array object. This property represents all <iframe> elements in the current window. DOM Windowframe is a read-only property. Syntax:window.framesProperties:length property: It returns the numb 2 min read HTML | DOM Window opener Properties The Window opener property in HTML DOM is used to return the reference of newly created windows. This property is used to return the details of the source (parent) window. A window is opened using the window.open() method and closed using the window.opener.close() method. Syntax:window.openerReturn 2 min read HTML | DOM Style transitionTimingFunction property The DOM Style transitionTimingFunction property allows a transition effect to change speed over its duration. Transition effect provides a way to control animation speed when changing properties. Syntax: To set the property:object.style.transitionTimingFunction = "ease|linear|ease-in| ease-out|ease- 2 min read HTML DOM Style textAlign Property The HTML DOM style textAlign property is similar to the text-align property in the CSS. It sets the alignment for the inner content of a block element using HTML DOM. SyntaxWe can use textAlign in two different ways, one to set the alignment, and the other to get the current alignment. Get the valu 3 min read HTML | DOM Style visibility Property The Style visibility property in HTML DOM used to set the visibility for an element. It is used to hide or show the element. It returns the visibility property that is given to an element. Syntax: It returns the visibility property.object.style.visibilityIt is used to set the visibility property. ob 2 min read HTML DOM Style transitionProperty Property The Style transitionProperty property in HTML DOM used to set the name of the CSS property for the transition effect. It can occur when a user hover over an element. It returns the transitionProperty property of an element. Syntax: It returns the transitionProperty property. object.style.transitionP 2 min read HTML | DOM Style position Property The position property sets or returns the type of positioning method used by the element. It may be static, relative, absolute or fixed. Syntax: Return position syntax: object.style.position Set position syntax: object.style.position = "static | absolute | fixed | relative | sticky | initial | inher 4 min read Like