JavaScript Kit- DOM Table Object Properties

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.