HTML | DOM TableData Object
Last Updated :
29 Jun, 2021
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:
document.getElementById("id");
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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...