/** *
table
objects expose the HTMLTableElement
interface, which provides special properties and methods (beyond the regular element object interface they also have available to them by inheritance) for manipulating the layout and presentation of tables in HTML.
*
align gets/sets the alignment of the table. *
*HTMLTableElement.align = alignment; * var alignment = HTMLTableElement.align; **
alignment
is a string with one of the following values:
* // Set the alignmnet of a table * var t = document.getElementById('TableA'); * t.align = 'center'; **
The align attribute is deprecated in HTML4.0. *
*W3C DOM 2 HTML Specification HTMLTableElement.align. *
* * * *Deprecated
bgcolor
gets/sets the background color of the table.
*
color = table.bgColor * table.bgColor = color **
color
is a string representing a color value.
* // Set table background colour to lightblue * var t = document.getElementById('TableA'); * t.bgColor = 'lightblue'; **
The bgColor
attribute is deprecated in HTML 4.01. The CSS:background-color
property should be used instead by modifying the element's style
object or using a style rule.
*
Also available on DOM tbody
, row
and cell
objects.
*
DOM Level 2 HTML: HTMLTableElement.bgColor *
* * * *border gets/sets the border width. *
*HTMLTableElement.border = border; * var border = HTMLTableElement.border; **
border
is string representing the width of the border in pixels.
* // Set the width of a table border to 2 pixels * var t = document.getElementById("TableA"); * t.border="2"; **
This attribute is deprecated in HTML 4.0. *
*W3C DOM 2 HTML Specification HTMLTableElement.border. *
* * * *caption returns the table caption. *
*string = table.caption **
if (table.caption) { * // do something with the caption * } **
This property returns void if no caption element exists for the table. *
*caption *
Interface HTMLTableCaptionElement *
* * * *cellPadding gets/sets the padding around the individual cells of the table. *
*HTMLTableElement.cellPadding = padding; * var padding = HTMLTableElement.cellPadding; **
padding
is either a number of pixels (e.g. "10") or a percentage value (e.g. "10%").
* // Set cell padding to 10 pixels * var t = document.getElementById("TableA"); * t.cellPadding = "10"; **
W3C DOM 2 HTML Specification HTMLTableElement.cellPadding. *
* * * *cellSpacing gets/sets the spacing around the individual cells of the table. *
*HTMLTableElement.cellSpacing = spacing; * var spacing = HTMLTableElement.cellSpacing; **
spacing
is either a number of pixels (e.g. "10") or a percentage value (e.g. "10%").
* // Set the cell spacing to 10 pixels * var t = document.getElementById('TableA'); * t.cellSpacing = "10"; **
W3C DOM 2 HTML Specification HTMLTableElement.cellSpacing. *
* * * *createCaption creates a new caption for the table. *
*HTMLTableElement = table.createCaption() **
mycap = mytable.createCaption(); **
If a caption element already exists on the table, this method returns that element. *
*createTFoot creates a new TFOOT for the table. *
*HTMLTableElement = table.createTFoot() **
myfoot = mytable.createTFoot(); * //checking: myfoot == mytable.tFoot **
If a tfoot element already exists for the table, this method returns that element *
*createTHead creates a new THEAD for the table. *
*HTMLElementObject = table.createTHead() **
myhead = mytable.createTHead(); * //checking: myhead == mytable.tHead **
If a thead element already exists for the table, this method returns that element. *
*deleteCaption removes the caption from the table. *
*HTMLTableElement.deleteCaption() **
mytable.deleteCaption(); *
*deleteRow removes a row from the table. *
*HTMLTableElement.deleteRow(index) **
index
is a number representing the row that should be deleted.
* mytable.deleteRow(1); * // delete the second row **
deleteTFoot removes a TFOOT from the table. *
*HTMLTableElement.deleteTFoot() **
mytable.deleteTFoot(); **
deleteTHead removes a THEAD from the table. *
*HTMLTableElement.deleteTHead() **
mytable.deleteTHead(); **
frame specifies which external table borders to render. *
*HTMLTableElement.frame = side; * var side = HTMLTableElement.frame; **
side
is a string with one of the following values:
* // Set the frame of TableA to 'border' * var t = document.getElementById('TableA'); * t.frame = "border"; * t.border = "2px"; **
W3C DOM 2 HTML Specification HTMLTableElement.frame. *
* * * *insertRow
inserts a new row in the table.
*
var row = HTMLTableElement.insertRow(index); **
HTMLTableElement
is a reference to a HTML table element.
* index
is the row index of the new row.
* row
is assigned a reference to the new row. If index
is -1 or equal to the number of rows, the row is appended as the last row. If index
is omitted or greater than the number of rows, an error will result.
* * <table id="TableA"> * <tr> * <td>Old top row</td> * </tr> * </table> * * <script type="text/javascript"> * * function addRow(tableID) * { * * // Get a reference to the table * var tableRef = document.getElementById(tableID); * * // Insert a row in the table at row index 0 * var newRow = tableRef.insertRow(0); * * // Insert a cell in the row at index 0 * var newCell = newRow.insertCell(0); * * // Append a text node to the cell * var newText = document.createTextNode('New top row') * newCell.appendChild(newText); * } * * // Call addRow() with the ID of a table * addRow('TableA'); * * </script> **
To be valid in an HTML document, a TR must have at least one TD element. *
Note that insertRow
inserts the row directly into the table and returns a reference to the new row. The row does not need to be appended separately as would be the case if document.createElement()
had been used to create the new TR element.
*
rows returns a collection of all the rows in the table. *
*HTMLCollectionObject = table.rows **
myrows = mytable.rows; **
The collection returned by the rows property of a table object includes all the rows in THEAD, TFOOT and all TBODY elements of the table. *
The rows property of a table section element (THEAD, TFOOT or TBODY) contains only the rows in that section element. *
*rows *
* * * *rules specifies which cell borders to render in the table. *
*HTMLTableElement.rules = rules; * var rules = HTMLTableElement.rules; **
rules
is a string with one of the following values:
* // Turn on all the internal borders of a table * var t = document.getElementById("TableID"); * t.rules = "all"; **
W3C DOM 2 HTML Specification HTMLTableElement.rules. *
* * * *summary gets/sets a table description. *
*HTMLTableElement.summary = string; * var string = HTMLTableElement.summary; **
HTMLTableElement.summary = "Usage statistics"; **
W3C DOM 2 HTML Specification HTMLTableElement.summary *
* * * *tBodies returns a collection of the table bodies. *
*HTMLCollectionObject = table.tBodies **
length(mytable.tBodies); **
The collection returned includes implicit TBODY elements. e.g. *
** <table> * <tr> * <td>cell one</td> * </tr> * </table> **
The DOM generated from the above HTML will have a TBODY element even though the tags are not included in the source HTML. *
*tBodies *
* * * *tFoot returns the table's TFOOT element. *
*HTMLTableSectionElementObject = table.tFoot **
if (table.tFoot == my_foot) { * ... * } **
This property returns VOID if no TFOOT element exists. *
*tfoot *
Interface HTMLTableSectionElement *
* * * *tHead returns the table's THEAD. *
*th_el = table.tHead **
th_el
is a HTMLTableSectionElement.
* if (table.tHead == my_head_el) { * ... * } **
This property returns VOID if no THEAD element exists. *
*thead *
Interface HTMLTableSectionElement *
* * * *width specifies the desired width of the table. *
*HTMLTableElement.width = width; * var width = HTMLTableElement.width; **
Where width
is a string representing the width in number of pixels or as a percentage value.
*
mytable.width = "75%"; **
W3C DOM 2 HTML Specification HTMLTableElement.width *
* * * *table
objects expose the HTMLTableElement
interface, which provides special properties and methods (beyond the regular element object interface they also have available to them by inheritance) for manipulating the layout and presentation of tables in HTML.
*