Javascript Reference - HTML DOM Table Object

The Table object represents an HTML <table> element.

Example

We can access a <table> element by using getElementById().


<!DOCTYPE html>
<html>
<head>
<style>
table, td {<!--from ww  w  .  j a v a 2s. c o  m-->
    border: 1px solid black;
}
</style>
</head>
<body>
<table id="myTable">
  <tr>
    <td>cell 1</td>
    <td>cell 2</td>
  </tr>
  <tr>
    <td>cell 3</td>
    <td>cell 4</td>
  </tr>
</table>
<button onclick="myFunction()">test</button>

<script>
function myFunction() {
    var x = document.getElementById("myTable");
    x.deleteRow(0);
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 2

We can create a <table> element by using the document.createElement() method.


<!DOCTYPE html>
<html>
<head>
<style>
table, td {<!--from   www.ja  va 2  s.  c  om-->
    border: 1px solid black;
}
</style>
</head>
<body>
<button onclick="myFunction()">test</button>

<script>
function myFunction() {
    var x = document.createElement("TABLE");
    x.setAttribute("id", "myTable");
    document.body.appendChild(x);

    var y = document.createElement("TR");
    y.setAttribute("id", "myTr");
    document.getElementById("myTable").appendChild(y);

    var z = document.createElement("TD");
    var t = document.createTextNode("cell");
    z.appendChild(t);
    document.getElementById("myTr").appendChild(z);
}
</script>

</body>
</html>

The code above is rendered as follows:

Table Object Collections

Collection	Description
cells	Returns a list of all <td> or <th> elements in a table
rows	Returns a list of all <tr> elements in a table
tBodies	Returns a list of all <tbody> elements in a table

Table Object Properties

Property	Description
align	Not supported in HTML5. Use style.cssFloat instead. Sets or gets the alignment of a table according to surrounding text
background	Not supported in HTML5. Use style.background instead. Sets or gets the background image of a table
bgColor	Not supported in HTML5. Use style.backgroundColor instead. Sets or gets the background color of a table
border	Deprecated. Use style.border instead. Sets or gets the width of the table border.
caption	Returns the <caption> element of a table
cellPadding	Not supported in HTML5. Use style.padding instead. Sets or gets the distance between the cell border and cell content
cellSpacing	Not supported in HTML5. Use style.borderSpacing instead. Sets or gets the distance between the cells in a table
frame	Not supported in HTML5. Sets or gets which outer-borders that should be displayed
height	Not supported in HTML5. Use style.height instead. Sets or gets the height of a table
rules	Not supported in HTML5. Sets or gets which inner-borders between the cells that should be displayed in a table
summary	Not supported in HTML5. Sets or gets a description of the data in a table
tFoot	Returns a reference to the <tfoot> element of a table
tHead	Returns a reference to the <thead> element of a table
width	Not supported in HTML5. Use style.width instead. Sets or gets the width of the table

Table Object Methods

Method	Description
createCaption()	Creates an empty <caption> element and adds it to the table
createTFoot()	Creates an empty <tfoot> element and adds it to the table
createTHead()	Creates an empty <thead> element and adds it to the table
deleteCaption()	Removes the first <caption> element from the table
deleteRow()	Removes a row (<tr>) from the table
deleteTFoot()	Removes the <tfoot> element from the table
deleteTHead()	Removes the <thead> element from the table
insertRow()	Creates an empty <tr> element and adds it to the table

Standard Properties and Events

The Table object supports the standard properties and events.