HTML | DOM Table Object - GeeksforGeeks

31 Jan, 2019
The Table object is used for representing an HTML <table> element. It can be used to create and access a table.
Syntax:
To access table element.:document.getElementById("id");
document.getElementById("id");
To create a table object:document.createElement("TABLE");
document.createElement("TABLE");
Below program illustrates the Table Object :
Example-1: Accessing a <table> element by using the getElementById() method.
<!DOCTYPE html><html>  <head>    <title>Table Object in HTML</title>    <style>        table,        td {            border: 1px solid green;        }                  h1 {            color: green;        }                  h2 {            font-family: Impact;        }                  body {            text-align: center;        }    </style></head>  <body>      <h1>GeeksforGeeks</h1>    <h2>Table Object</h2>    <br>      <table id="table" align="center">        <tr>            <td>Fork Python</td>            <td>Fork Java</td>        </tr>        <tr>            <td>Sudo Placement</td>            <td>Fork CPP</td>        </tr>    </table>      <p>Double click the "Delete Row"       button to remove the second row from the table.</p>      <button onclick="delete()">Delete Row</button>      <script>        function delete() {                        // Accessing table object.            var x = document.getElementById("table");            x.deleteRow(0);        }    </script>  </body>  </html>
Output:Before Clicking The Button:
After Clicking The Button:
Example-2: Creating a <table> element by using the document.createElement() method.
<!DOCTYPE html><html>  <head>    <title>Table Object in HTML</title>    <style>        table {            border: 1px solid green;        }                  h1 {            color: green;        }                  h2 {            font-family: Impact;        }                  body {            text-align: center;        }    </style></head>  <body>      <h1>GeeksforGeeks</h1>    <h2>Table Object</h2>    <br>      <p>Double click the "Create" button to create a       TABLE, a Table row and a Table cell element.</p>      <button ondblclick="create()">Create</button>      <script>        function create() {                        // Create table object.            var a = document.createElement("TABLE");            a.setAttribute("id", "MyTable");            document.body.appendChild(a);              var b = document.createElement("TR");            b.setAttribute("id", "MyTr");            document.getElementById("MyTable").appendChild(b);              var c = document.createElement("TD");            var d = document.createTextNode("Table cell");            c.appendChild(d);            document.getElementById("MyTr").appendChild(c);        }    </script>  </body>  </html>
Output:Before Clicking The Button:
After Clicking The Button:
Supported Browsers:
Opera
Internet Explorer
Google Chrome
Firefox
Apple Safari
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
HTML-DOM
Picked
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to set the default value for an HTML <select> element ?
How to update Node.js and NPM to next version ?
How to set input type date in dd-mm-yyyy format using HTML ?
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?