This is the main wrapper for all the other table elements, and other table elements will be ignored if they aren't wrapped inside of a <TABLE> ... </TABLE>
element.
The <TABLE>
element has the following attributes :
BORDER="value"
This attribute can be used to both control and set the borders to be displayed for the table. If present, then a border will be drawn around all data cells. The exact thickness and display of this default border is at the discretion of individual browsers. If the attribute isn't present, then the border is not displayed, but the table is rendered in the same position as if there were a border (i.e. allowing room for the border). It can also be given a value, i.e. BORDER=<value>
which specifies the thickness that the table border should be displayed with. The border value can be set to 0, which regains all the space that the browser has set aside for any borders (as in the case where no border has been set described above)
CELLPADDING="value"
The CELLPADDING
is the amount of white space between the borders of the table cell and the actual cell data (whatever is to be displayed in the cell). It defaults to an effective value of 1
CELLSPACING="value"
The CELLSPACING
is the amount of space inserted between individual table data cells. It defaults to an effective value of 2.
gives the most compact table possible.
<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0">
COLS="number of columns"
Both Netscape (4.0 and above) and Internet Explorer (3.01 and above) claim to support the <TABLE COLS="n">
attribute. The purpose of this attribute is to allow the browser to incrementally display large tables as the cell data is downloaded. It is part of the 'Complex Table Model' as defined in the W3C draft HTML 3 Tables draft specification. However, use of this attribute appears to do nothing in Internet Explorer or Netscape (Communicator preview 2). (It has been included here for completeness).
WIDTH="value or percent"
If used, this attribute can specify either the exact width of the table in pixels, or the width of the table as a percentage of the browser display window.
HEIGHT="value or percent"
If used, this attribute can specify either the exact height of the table in pixels, or the height of the table as a percentage of the browser display window.
ALIGN="left|right"
Some browsers (Internet Explorer and Netscape) support the ALIGN
attribute to the <TABLE>
element. Like that used for floating images, it allows a table to be aligned to the left or right of the page, allowing text to flow around the table. Also, as with floating images, it is necessary to have knowledge of the <BR CLEAR= ...>
element, to be able to organise the text display so as to minimise poor formatting.
VALIGN="top|bottom|center"
The Internet Explorer and Netscape support this attribute that specifies the vertical alignment of the text displayed in the table cells. The default (which is also used if the attribute is not set is centre-aligned.)
BGCOLOR="#rrggbb|colour name"
Internet Explorer and Netscape support use of this attribute (also supported in the <BODY>
element). It allows the background colour of the table to be specified, using either the specified colour names, or a rrggbb hex triplet.
BORDERCOLOR="#rrggbb|colour name"
Internet Explorer includes support for this attribute which sets the border colour of the table. Any of the pre-defined colour names can be used, as well as any colour defined by a rrggbb hex triplet. It is necessary for the BORDER
attribute to be present in the main <TABLE>
element for border colouring to work.
BORDERCOLORLIGHT="#rrggbb|colour name"
Internet Explorer allows use of the BORDERCOLORLIGHT
attribute to set independently, the lighter colour to be displayed on a 3-dimensional table border. It is the opposite of BORDERCOLORDARK
. Any of the pre-defined colour names can be used, as well as any colour defined by a rrggbb hex triplet. It is necessary for the BORDER
attribute to be present in the main <TABLE>
element for border colouring to work.
BORDERCOLORDARK="#rrggbb|colour name"
Internet Explorer allows use of the BORDERCOLORDARK
attribute to set independently, the darker colour to be displayed on a 3-dimensional table border. It is the opposite of BORDERCOLORLIGHT
. Any of the pre-defined colour names can be used, as well as any colour defined by a rrggbb hex triplet. It is necessary for the BORDER
attribute to be present in the main <TABLE>
element for border colouring to work.
NOTE : The BGCOLOR
, BORDERCOLOR
, BORDERCOLORLIGHT
and BORDERCOLORDARK
attributes can also be used in <TH>
, <TR>
and <TD>
elements, with the colour defined in the last element over-riding those defined before. E.g. if a <TD>
element contains a BORDERCOLOR
attribute setting, the setting specified will be used instead of any colour settings that may have been specified in the <TR>
element, which in turn over-rides any colour settings in the <TABLE>
element.
BACKGROUND="URL of image"
Internet Explorer and Netscape support the placing of images in the <TABLE>
element. (Also in the <TD>
and <TH>
elements) If used in the <TABLE>
element, the image in question will be tiled behind all of the table cells. Any of the supported graphic file formats can be used as a graphic behind a table.
FRAME
Only Internet Explorer supports the use of this attribute. It requires the BORDER
attribute to be set and affects the display of the table borders. It can accept any of the following values:
void | this removes all the external borders |
above | this displays external borders at the top of the table only |
below | this displays external borders at the bottom of the table only |
hsides | this displays external borders at the horizontal sides of the table. I.e. at the top and bottom of the table. |
lhs | this displays external borders at the left hand edges of the table only. |
rhs | this displays external borders at the right hand edges of the table only. |
vsides | this displays external borders at both left and right hand edges of the table. |
box | this displays a box around the table (i.e. top, bottom, left and right hand sides) |
RULES
Internet Explorer supports this new attribute. It requires the BORDER
value to be set and may only be used in tables where the <THEAD>
, <TBODY>
and <TFOOT>
sections have been set. It affects the display of the internal table borders ("rules"). It can accept the following values:
none | this removes all the internal rules |
basic | this displays horizontal borders between the <THEAD> , <TBODY> and <TFOOT> sections. |
rows | this displays horizontal borders between all rows |
cols | this displays horizontal borders between all columns |
all | this displays all the internal rules. |
TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE
attribute is used for informational purposes. If present, the value of the TITLE
attribute is presented as a ToolTip when the users mouse hovers over the <TABLE>
section.
LANG="language setting"
The LANG
attribute can be used to specify what language the <TABLE>
element is using. It accepts any valid ISO standard language abbreviation (for example "en"
for English, "de"
for German etc.) For more details, see the Document Localisation section for more details.
LANGUAGE="Scripting language"
The LANGUAGE
attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <TABLE>
element. It can accept values of vbscript
, vbs
, javascript
or jscript
. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE
attribute is set.
CLASS="Style Sheet class name"
The CLASS
attribute is used to specify the <TABLE>
element as using a particular style sheet class. See the Style Sheets topic for details.
STYLE="In line style setting"
As well as using previously defined style sheet settings, the <TABLE>
element can have in-line stylings attached to it. See the Style Sheets topic for details.
ID="Unique element identifier"
The ID
attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <TABLE>
element for scripting purposes. Any <TABLE>
element with an ID
attribute can be directly manipulated in script by referencing its ID
attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.
DATAPAGESIZE="Number of records to show"
The DATAPAGESIZE
attribute specifies how many records will be displayed at any one time when the <TABLE>
is set up as a repeating data-bound table. For more information, see the Data Binding topic.
DATASRC="Data Source"
The DATASRC
attribute is used to specify which data source provider the table is using to gather its data. For more information, see the Data Binding topic.
DATAFLD="Column Name"
The DATAFLD
attribute specifies which column of the data source is to be used to provide the data for the table. For more information, see the Data Binding topic.
Every <TABLE>
element in a document is an object that can be manipulated through scripting. Note that scripting of the <TABLE>
element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <TABLE>
element at all.
<TABLE...>
Properties
Of the standard Dynamic HTML properties, the <TABLE...>
element/object supports the following: className, document, id, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.
The <TABLE>
element also supports the following properties, all of which directly reflect their attribute values: align, background, bgColor, border, borderColor, borderColorDark, borderColorLight, cellPadding, cellSpacing, cols, dataFld, dataPageSize, dataSrc, frame, height, rules and width.
caption
The caption
property contains a reference to the <TABLE>
elements <CAPTION>
element if one exists.
clientHeight
The clientHeight
property reflects the height (in pixels) of the contents of the <CAPTION>
element.
clientWidth
The clientWidth
property reflects the width (in pixels) of the contents of the <CAPTION>
element.
scrollHeight
The scrollHeight
property reflects the contents of the <TABLE>
elements total scrollable height (in pixels).
scrollLeft
The scrollLeft
property reflects a value representing the distance between the left-most edge of the element and the left-most visible edge of the element. While the contents of the <TABLE>
element are totally visible on the screen, the scrollLeft
property is 0, only increasing if the left-most edge of the <TABLE>
elements contents are scrolled off the left hand edge of the current viewing window.
scrollTop
The scrollTop
property returns a value that represents the distance between the top-most edge of the element and the top-most edge of the current viewing window. When used with the <TABLE>
element, the scrollTop
property is a value indicative of the extent to which the referenced element has been scrolled vertically. If the contents of the <TABLE>
element are visible, then the scrollTop
property will be 0, only increasing as the contents of the element are scrolled off the top of the current viewing window.
scrollWidth
Like the scrollHeight
property, the scrollWidth
property reflects a value that represents the total scrollable width of the contents of the <TABLE>
element.
<TABLE...>
Methods
The <TABLE...>
element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.
The <TABLE>
element also supports the following method:
blur
The blur
event can be used to force the users focus away from the referenced <TABLE>
element, firing the onblur
event.
createCaption
The createCaption
method can be used to create a <CAPTION>
element for the referenced <TABLE>
element. If one already exists, then the method returns a pointer to it. For example:
elCaption=document.all("tblExample").createCaption()
would create and empty <CAPTION>
element for the <TABLE>
element referenced by ...all("tblExample")
. This new <CAPTION>
element can then be manipulated using the various methods and properties of the <CAPTION>
element (see that element for details).
createTFoot
The createTFoot
method can be used to create a <TFOOT>
element for the referenced <TABLE>
element. If one already exists, then the method returns a pointer to it. For example:
elTFoot=document.all("tblExample").createTFoot()
would create and empty <TFOOT>
element for the <TABLE>
element referenced by ...all("tblExample")
. This new <TFOOT>
element can then be manipulated using the various methods and properties of the <TFOOT>
element (see that element for details).
createTHead
The createTHead
method can be used to create a <THEAD>
element for the referenced <TABLE>
element. If one already exists, then the method returns a pointer to it. For example:
elTHead=document.all("tblExample").createTHead()
would create and empty <THEAD>
element for the <TABLE>
element referenced by ...all("tblExample")
. This new <THEAD>
element can then be manipulated using the various methods and properties of the <THEAD>
element (see that element for details).
deleteCaption
The deleteCaption
method can be used to delete an existing <CAPTION>
element for the referenced <TABLE>
element (either one that is there in the document source, or one created with the createCaption
method. For example:
document.all("tblExample").deleteCaption()
deletes the existing (or created) <CAPTION>
element for the <TABLE>
element referenced by ...all("tblExample")
.
deleteRow
The deleteRow
method deletes the row referenced by the index
argument for the referenced <TABLE>
element, also removing it from the Rows Collection for the <TABLE>
element. Note that when using the deleteRow
method for the <TABLE>
element, the rowIndex
property of the <TR>
element to be deleted must be used. For example:
document.all("tblExample").deleteRow(1)
would delete the second <TR>
element contained in the <TABLE>
element, whether it's in a <THEAD>
, <TBODY>
, or <TFOOT>
section of the <TABLE>
deleteTFoot
The deleteTFoot
method can be used to delete an existing <TFOOT>
element for the referenced <TABLE>
element (either one that is there in the document source, or one created with the createTFoot
method. For example:
document.all("tblExample").deleteTFoot()
deletes the existing (or created) <TFOOT>
element for the <TABLE>
element referenced by ...all("tblExample")
.
deleteTHead
The deleteTHead
method can be used to delete an existing <THEAD>
element for the referenced <TABLE>
element (either one that is there in the document source, or one created with the createTHead
method. For example:
document.all("tblExample").deleteTHead()
deletes the existing (or created) <THEAD>
element for the <TABLE>
element referenced by ...all("tblExample")
.
insertRow
The insertRow
method inserts a new <TR>
element into the referenced <TABLE>
element. It can take an optional index
argument which should specify where in the <TABLE>
the new row is to be inserted. Note that inserting a new row into a <TABLE>
element also inserts it into the Rows Collection for the <TABLE>
element. For example:
rowNew=document.all("tblExample").insertRow(3)
inserts a new fourth row into the main <TABLE>
element, which may impact the Rows Collection for the <THEAD>
, <TBODY>
, or <TFOOT>
elements, depending on the number of rows in each section.
focus
The focus
method can be used to pass the users focus to the referenced <TABLE>
element, forcing the onfocus
event to fire.
nextPage
The nextPage
re-renders the <TABLE>
with the next block of data records (the size being set by the DATAPAGESIZE
attribute), if the <TABLE>
has been set up as a data-bound repeating table. For more information, see the Data Binding topic.
previousPage
The previousPage
method will display the 'previous' block of records, if the table is a data-bound repeating table. For more information, see the Data Binding topic.
refresh
The refresh
method causes the table (and its data) to be refreshed, if the table is a data-bound, repeating table. For more information, see the Data Binding topic.
<TABLE...>
Events
The <TABLE...>
element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.
Additionally, the <TABLE>
element supports the following events:
onafterupdate
The onafterupdate
event is fired after data is transferred from the element to the data provider and will only fire after the onbeforeupdate
event has fired and was successful. For more information on Data Binding, see the Data Binding topic.
onbeforeupdate
onbeforeupdate
fires when a data bound element loses the focus, or the current document is unloaded and will only fire if the value of the element is different to the original value that was present when the element received the users focus. Note that onbeforeupdate
is a cancelable event (setting returnValue=false
for the Event object), which allows the document /script author a chance to validate the new data entered by the user on the client-side, before sending the data to the data provider. For more information on Data Binding, see the Data Binding topic.
onblur
When the referenced <TABLE>
element loses the users focus, the onblur
event is fired, executing any script events that are attached to it.
onfocus
When the user passes the focus to any <TABLE>
element, the onfocus
event is fired for that element.
onresize
The onresize
event is fired whenever the contents of the <TABLE>
element are resized, by window movement, or dynamically through scripting.
onrowenter
The onrowenter
event fires on the data source control when the current record has been changed, so new data is available to populate the HTML display elements that are bound to the data source. Somewhat confusingly, this will typically happen after the onrowexit
event has been fired. For more information on Data Binding, see the Data Binding topic.
onrowexit
The onrowexit
event is fired immediately before the data source changes the current record (i.e. when the user has requested another record, or set of records by pressing a button perhaps). Note that unlike the anafterupdate
and onbeforeupdate
events, onrowexit
is fired by the data source, not any of the HTML elements used to display the data. Changes to the data in the HTML elements should have been transferred to the data source (with validation being taken care of in the on*update
events). onrowexit
will also fire if the record position is changed through scripting. For more information on Data Binding, see the Data Binding topic.
© 1995-1998, Stephen Le Hunte
See also:
file: /Techref/language/html/ib/Tables/table.htm, 33KB, , updated: 2009/3/9 12:53, local time: 2024/11/14 09:32,
3.129.67.32:LOG IN
|
©2024 These pages are served without commercial sponsorship. (No popup ads, etc...).Bandwidth abuse increases hosting cost forcing sponsorship or shutdown. This server aggressively defends against automated copying for any reason including offline viewing, duplication, etc... Please respect this requirement and DO NOT RIP THIS SITE. Questions? <A HREF="http://linistepper.com/techref/language/html/ib/Tables/table.htm"> <TABLE></A> |
Did you find what you needed? |