Categories:

JavaScript Kit > DOM Reference > Here

Table Object Properties

Created: February 17th, 2009

The Table object of the DOM supports a handful of unique properties and methods to help you easily perform tasks like dynamically generate a table or certain rows/columns. This is on top of the standard DOM Element properties/ methods the Table object has access to.

Table object properties

Methods Description
align Gets or sets the alignment of the table.
bgColor Gets or sets the background color of the table. Color name or hexadecimal value.
border Gets or sets the thickness of the inherent, 3D border of the table (different from the generic "border" property of CSS). Numeric string value.

Example:

document.getElementById("atable").border="3"

borderColor IE only property that gets or sets the border color of the "border" property above.
borderColorDark IE only property that gets or sets the "dark" aspect of the "border" property above.
borderColorLight IE only property that gets or sets the "light" aspect of the "border" property above.
caption References the caption element of a table.
cellPadding Gets or sets the cellPadding attribute of the table. Value should be numeric string (ie: "5") or percentage (ie: "10%").
cells[] Returns an array containing all the td elements inside the table, in source order.

Example(s):

var mytable=document.getElementById("atable")
var tdref=new Array() //array to hold references to table cells
for (var i=0; i<mytable.cells.length; i++)
tdref[tdref.length]=mytable.cells[i] //store references to table cells

alert(tdref.length) //alerts number of cells in the table

cellSpacing Gets or sets the cellSpacing attribute of the table. Value should be numeric string (ie: "5") or percentage (ie: "10%").
frame Specifies which sides of a table outer border to show. The possible string values are:
Value Description
above Show top border only.
below Show bottom border only.
border Show all sides of border.
box Show all sides of border.
hsides Show top and bottom borders only.
lhs Show left border only.
rhs Show right border only.
void Hide all borders (default).
vsides Show left and right borders only.

The "border" property must also be set in order for the effect to be visible (ie: border="3").

height IE only property that specifies the height of the table.
rows[] Returns an array containing all the rows (tr) elements inside the table, in source order. This includes all rows found in THEAD, TFOOT and TBODY elements.

The rows[] array of a table section contains only the rows for that section. The table sections are: THEAD, TFOOT and TBODY.

rules Specifies which sides of cells' interior border to show.
Value Description
all Show border around each cell.
cols Show border around columns only.
groups Show border between cell groups only (thead, tfoot, tbody, colgroup, or col elements).
none Don't show any border between cells.
rows Show border between rows only.

The "border" property must also be set in order for the effect to be visible (ie: border="3").

summary Gets or sets the "summary" attribute of the table, a description of the table that can be accessed via scripting.
tBodies[] Returns an array containing all the tbody elements inside the table, in source order. Note that this includes implicit tbody elements- every table has at least one tbody element.
tFoot References the tFoot elment of the table.
tHead References the tHead elment of the table.
width Gets or sets the width of the table.

Table tr object properties

The tr element of a table supports several properties of its own that are accessible via scripting. The most important one is the below:

Methods Description
cells[] Returns an array containing all the td or th elements within a table row.

Sponsored By

DD CSS Library
Free CSS menus and codes to give your site a visual boost.

DOM Window
DOM Document
DOM Element
DOM Event
DOM Style
DOM Table
Miscellaneous

 

CopyRight 1998-2012 JavaScript Kit. NO PART may be reproduced without author's permission.