td, thNN 6 IE 4 DOM 1  

  

The td and th objects reflect the td and th elements. From an HTML structure viewpoint, the two elements have different purposes within a table; but from a scripting perspective, the elements share the same properties and methods. A cell is a cell.

 

While a table cell element may inherit a number of visual properties from containers (e.g., a td element appearing to pick up the bgColor of a tbody or tr element), those inherited property values are not automatically assigned to the td object. Therefore, just because a cell may have a yellow background color doesn't mean its bgColor property is set at all. Due to incomplete implementation, IE 4 for the Macintosh does not offer complete scripted access to these element objects.

 
HTML Equivalent
 
<td>
<th>
 
Object Model Reference
 
[window.]document.getElementById("elementID")
[window.]document.getElementById("tableRowID").cells[i]
 
Object-Specific Properties
 
abbralignaxisbackground
bgColorborderColorborderColorDarkborderColorLight
cellIndexchchOffcolSpan
headersheightnoWraprowSpan
scopevAlignwidth
 
Object-Specific Methods

None.

 
Object-Specific Event Handler Properties

None.

abbrNN 6 IE 5(Mac)/6(Win) DOM 1  

Read/Write  

Reflects the abbr attribute (cell description for speech), for which mainstream browsers have no functionality at this time.

 
Value

String.

 
Default

Empty string.

alignNN 6 IE 4 DOM 1  

Read/Write  

Defines the horizontal alignment of content within the cell.

 
Example
 
document.getElementById("myTD").align = "center";
 
Value

Any of the three horizontal alignment constants: center | left | right.

 
Default

left

axisNN 6 IE 5(Mac)/6(Win) DOM 1  

Read/Write  

Reflects the axis attribute (cell category description for speech), for which mainstream browsers have no functionality at this time.

 
Value

String.

 
Default

Empty string.

backgroundNN n/a IE 4 DOM n/a  

Read/Write  

Specifies the URL of the background image for the cell. If you set a bgColor to the element as well, the color appears if the image fails to load; otherwise, the image overlays the color.

 
Example
 
document.getElementById("myTD").background = "images/watermark.jpg";
 
Value

Complete or relative URL to the background image file.

 
Default

None.

bgColorNN 6 IE 4 DOM 1  

Read/Write  

Provides the background color of the table cell. This color setting is not reflected in the style sheet backgroundColor property. Even if the bgcolor attribute or bgColor property is set with a plain-language color name, the returned value is always a hexadecimal triplet.

 
Example
 
document.getElementById("myTD").bgColor = "yellow";
 
Value

A hexadecimal triplet or plain-language color name. See Appendix A for acceptable plain-language color names.

 
Default

Varies with browser and operating system.

blur( )NN 2 IE 3 DOM 1  

Removes focus from the current object, at which time the object's onblur event fires. Note that the range of elements capable of focus and blur (both the event and method) is limited in all browsers except for more recent versions of IE (see the shared tabindex attribute in Chapter 8). Most reliably for backward compatibility, apply the blur( ) method to blatantly focusable elements, such as text input and textarea elements. Assigning the attribute onfocus="this.blur( );" to a text input element, for instance, is a crude but effective backward-compatible way to largely disable a field for browsers that do not provide genuine element disabling.

 

Use blur( ) and focus( ) methods in moderation on the same page. You can inadvertently trigger endless loops of blurring and focusing if alert dialog boxes are involved along the way. Moreover, be aware that when you invoke the blur( ) method on one object, some other object (perhaps the window object) receives an onfocus event.

 
Parameters

None.

 
Returned Value

None.

borderColorNN n/a IE 4 DOM n/a  

Read/Write  

Provides the color of the element's border. Internet Explorer applies the color to all four lines that make up the interior border of a cell. Therefore, colors of adjacent cells do not collide.

 
Example
 
document.getElementById("myTD").borderColor = "salmon";
 
Value

A hexadecimal triplet or plain-language color name. A setting of empty is interpreted as "#000000" (black). See Appendix A for acceptable plain-language color names.

 
Default

Varies with operating system.

borderColorDark, borderColorLightNN n/a IE 4 DOM n/a  

Read/Write  

The 3-D effect of table borders in Internet Explorer is created by careful positioning of light and dark lines around the page's background or default color. You can independently control the colors used for the dark and light lines by assigning values to the borderColorDark (left and top edges of the cell) and borderColorLight (right and bottom edges) properties.

 

Typically, you should assign complementary colors to the pair of properties. There is also no rule that says you must assign a dark color to borderColorDark. The attributes merely control a well-defined set of lines so you can predict which lines of the border change with each attribute.

 
Example
 
document.getElementById("myTD").borderColorDark = "blue";
document.getElementById("myTD").borderColorLight = "cornflowerblue";
 
Value

A hexadecimal triplet or plain-language color name. A setting of empty is interpreted as "#000000" (black). See Appendix A for acceptable plain-language color names.

 
Default

Varies with operating system.

cellIndexNN 6 IE 4 DOM 1  

Read-only  

Returns a zero-based integer representing the position of the current cell among all other td elements in the same row. The count is based on the source code order of the td elements within a tr element. This property is not available in the Macintosh version of Internet Explorer 4.

 
Example
 
var whichCell = document.getElementById("myTD").cellIndex;
 
Value

Integer.

 
Default

None.

chNN 6 IE 5(Mac)/6(Win) DOM 1  

Read/Write  

Defines the text character used as an alignment point for text within a cell. This property is normally of value only for the align attribute set to "char". In practice, neither IE nor Navigator responds to these properties.

 
Example
 
document.getElementById("myTD").ch = ".";
 
Value

Single character string.

 
Default

None.

chOffNN 6 IE 5(Mac)/6(Win) DOM 1  

Read/Write  

Defines the offset point at which the character specified by the char attribute is to appear within a cell. In practice, neither IE nor Navigator responds to these properties.

 
Example
 
document.getElementById("myTD").chOff = "80%";
 
Value

String value of the number of pixels or percentage (within the cell).

 
Default

None.

clientHeight, clientWidthNN 7 IE 4 DOM n/a  

Read-only  

Broadly speaking, these provide the height and width of the element's content, but with minor variations with respect to element padding among various operating system versions of IE and compatibility modes controlled by the DOCTYPE declaration. Not available for all element types in IE for Macintosh. For Netscape 7, values are zero except when an element's content overflows the viewable area, in which case the values reveal the dimensions of the viewable area (e.g., the browser window's content region for the document.body element). See the Section 9.2 at the beginning of this chapter for details.

 
Example
 
var midHeight = document.body.clientHeight/2;
 
Value

Integer pixel value.

 
Default

0

colSpanNN 6 IE 4 DOM 1  

Read/Write  

Specifies the number of columns across which the current table cell should extend itself. For each additional column included in the colSpan count, one less td element is required for the table row. If you set the align property to center or right, the alignment is calculated on the full width of the td element across the specified number of columns. Unless the current cell also specifies a rowspan attribute, the next table row returns to the original column count.

 
Example
 
document.getElementById("myTD").colSpan = 2;
 
Value

Integer, usually 2 or larger.

 
Default

1

filters[ ]NN n/a IE 4 DOM n/a  

  

Returns an array of all filter objects contained by the current element. Applies only to the following element objects: bdo, body, button, div, fieldset, img, input, marquee, rt, ruby, span, table, td, textarea, and th. See the filter object for referencing syntax.

 
Value

Array of filter object references.

 
Default

Array of length zero.

focus( )NN 2 IE 3 DOM 1  

Gives focus from the current object, at which time the object's onfocus event fires. Note that the range of elements capable of focus and blur (both the event and method) is limited in all browsers except for more recent versions of IE (see the shared tabindex attribute in Chapter 8). Most reliably for backward compatibility, apply the focus( ) method to blatantly focusable elements, such as text input and textarea elements.

 

To give a text box focus and pre-select all the text in the box, use the sequence of focus( ) and select( ) methods on the element. If this sequence is to occur after windows change (such as after an alert dialog box closes), place the methods in a separate function, and invoke this function through the setTimeout( ) method following the alert( ) method for the dialog. This allows IE/Windows to sequence statement execution correctly.

 
Parameters

None.

 
Returned Value

None.

headersNN 6 IE 5(Mac)/6(Win) DOM 1  

Read/Write  

Points to the ID of a table cell element designated as a column header for the current cell. In practice, no mainstream browsers provide functionality for this property.

 
Value

String ID value.

 
Default

None.

height, widthNN 6 IE 4 DOM 1  

Read/Write  

Specify the height and width of the element. Changes to these values are immediately reflected in reflowed content on the page. These properties are read-only in the Macintosh version of Internet Explorer 4.

 
Example
 
document.getElementById("myTD").height = "250";
 
Value

Pixel integer count (as a string) or a percentage.

 
Default

None.

noWrapNN 6 IE 4 DOM 1  

Read/Write  

Indicates whether the browser should render the cell as wide as is necessary to display a line of nonbreaking text on one line. Abuse of this attribute can force the user into a great deal of inconvenient horizontal scrolling of the page to view all of the content.

 
Example
 
document.getElementById("myTD").noWrap = "true";
 
Value

Boolean value: true | false.

 
Default

false

rowSpanNN 6 IE 4 DOM 1  

Read/Write  

Specifies the number of rows through which the current table cell should extend itself downward. For each additional row included in the rowSpan count, one less td element is required for the next table row. If you set the vAlign property to middle, the alignment is calculated on the full height of the td element across the specified number of rows.

 
Example
 
document.getElementById("myTD").rowSpan = 12;
 
Value

Integer, usually 2 or larger.

 
Default

1

scopeNN 6 IE 5(Mac)/6(Win) DOM 1  

Read/Write  

Reflects the scope attribute of table cell elements. In practice, no mainstream browsers provide functionality for this property.

 
Value

One of the recognized string constants: cols | colgroup | rows | rowgroup.

 
Default

None.

vAlignNN 6 IE 4 DOM 1  

Read/Write  

Specifies the manner of vertical alignment of text within the element's content box.

 
Example
 
document.getElementById("myTD").vAlign = "baseline";
 
Value

Case-insensitive constant (as a string): baseline | bottom | middle | top.

 
Default

middle

width  

  

See height.