HTML | DOM TableData Object
The TableData object in HTML DOM is used to represent the HTML td element. The td element can be accessed by using getElementById() method.
Syntax:
- To Access td Element:
document.getElementById("id");
- To Create td Element:
document.createElement("td");
TableData Object Properties:
| Property | Description |
|---|---|
| abbr | This property is used to set or return the value of the abbr attribute. |
| align | This property is used to set or return the horizontal alignment of the content in a data cell. |
| vAlign | This property is used to set or return the vertical alignment of the content within a cell. |
| width | This property is used to set or return the width of a data cell. |
| axis | This property is used to set or return a comma-separated list of related data cells. |
| background | This property is used to set or return the background image of a data cell. |
| bgColor | This property is used to set or return the background color of a table. |
| cellIndex | This property is used to return the position of a cell in the cells collection of a table row. |
| ch | This property is used to set or return an alignment character for a data cell. |
| chOff | This property is used to set or return the horizontal offset of the ch property. |
| colSpan | This property is used to set or return the value of the colspan attribute. |
| headers | This property is used to set or return the value of the headers attribute. |
| height | This property is used to set or return the height of a data cell. |
| noWrap | This property is used to set or return whether the content in a cell can be wrapped. |
| rowSpan | This property is used to set or return the value of the rowspan attribute. |
Example-1: Access Table data and add new content.
html
<!DOCTYPE html><html><head> <style> table, th, td { border: 1px solid green; } </style></head><body> <body style="text-align:center;"> <h1 style="color:green;"> GeeksForGeeks </h1> <h2>DOM TableData Object</h2> <table> <tr> <td id="myTd">Geeks</td> <td>For</td> <td>Geeks</td> </tr> </table> <p>Click the button to change the text of the first td element.</p> <button onclick="myFunction()"> Click Here! </button> <p id="demo"></p> <script> function myFunction() { // Accessing Table data var x = document.getElementById("myTd"); x.innerHTML = "Add new content"; } </script> </body></html> |
Output:
Before click on the button:
After click on the button:
Example-2: Creating td element using document.createElement(“TD”);.
html
<!DOCTYPE html><html><head> <style> table, th, td { border: 1px solid green; } </style></head> <body style="text-align:center;"> <h1 style="color:green;"> GeeksForGeeks </h1> <h2>DOM TableData Object</h2> <table id="myTable"> <tr id="myTr"> </tr> </table> <p>Click the button to create a td element.</p> <button onclick="myFunction()"> Click Here! </button> <script> function myFunction() { // Creating td element. var x = document.createElement("TD"); var t = document.createTextNode("Hello Geeks!"); x.appendChild(t); document.getElementById( "myTr").appendChild(x); } </script> </body></html> |
Output:
Before click on the button:
After click on the button:
Note: Most of the properties not supported in html5.
Supported Browsers:
- Google Chrome
- Edge
- Mozilla Firefox
- Opera
- Safari
Please Login to comment...