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.