TR Element | TR Object

MS Office DHTML, HTML & CSS

previous page next page

Click to return to the DHTML, HTML & CSS home page

TITLE Element | TITLE Obj...

TT Element | TT Object

DHTML Objects

Web Workshop | DHTML, HTML & CSS

TR Element | TR Object

Specifies a row in a table.

HTML Syntax

<TR
    ALIGN=CENTER | LEFT | RIGHT
    BGCOLOR=color
    BORDERCOLOR=color
    BORDERCOLORDARK=color
    BORDERCOLORLIGHT=color
    CLASS=classname
    HEIGHT=height
    ID=value
    LANG=language
    LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
    STYLE=css1-properties
    TITLE=text
    VALIGN=BASELINE | BOTTOM | CENTER | TOP
    WIDTH=width
    event = script
>

Remarks

The TD and TH tags are valid within a row.

The TR element does not explicitly support the HEIGHT attribute. To achieve the same effect, use the cascading style sheets (CSS) height attribute.

To change the HTML in the TR element, use the table object model. For example, use the rowIndex property or the rows collection to retrieve a reference to a specific table row. You can add or delete rows using the insertRow and deleteRow methods. To retrieve a reference to a specific cell, use the cellIndex property or the cells collection. You can add or delete rows using the insertCell and deleteCell methods. To change the content of a particular cell, use the innerHTML or innerText property.

The TR element is a block element and requires a closing tag.

This element is available in HTML as of Microsoft® Internet Explorer 3.0, and in script as of Internet Explorer 4.0.

Members

TR Members

Styles

TR Styles

Example

The following examples show how to create a table row in HTML and script.

Sample Code

This example uses the TR element with the TABLE, TD, and TR objects to create a table with two rows.

<TABLE>
<TR>
<TD>This is the first row.</TD>
</TR>
<TR>
<TD>This is the second row.</TD>
</TR>
</TABLE>

This example uses the table object model to dynamically add two rows and two cells to a table when the user clicks a button.

<SCRIPT>
function createRows(){
   // insert two rows.
   var oRow1=oTable.insertRow(oTable.rows.length);
   var oRow2=oTable.insertRow(oTable.rows.length);
   
   // retrieve the rows collection for the table.
   var aRows=oTable.rows;
   
   // retrieve the cells collection for the first row.
   var aCells=oRow1.cells;
   
   // insert two cells into the first row.
   var oCell1_1=aRows(oRow1.rowIndex).insertCell(aCells.length);
   var oCell1_2=aRows(oRow1.rowIndex).insertCell(aCells.length);
   
   // retrieve the cells collection for the second row.
   aCells=oRow2.cells;
   
   // insert two cells into the second row.
   var oCell2_1=aRows(oRow2.rowIndex).insertCell(aCells.length);
   var oCell2_2=aRows(oRow2.rowIndex).insertCell(aCells.length);
   
   // Add regular HTML values to the 4 new cells. 
   oCell1_1.innerHTML="<B>Cell 1.1!</B>";
   oCell1_2.innerHTML="<B>Cell 1.2!</B>";
   oCell2_1.innerHTML="<B>Cell 2.1!</B>";
   oCell2_2.innerHTML="<B>Cell 2.2!</B>";		
}
</SCRIPT>
<INPUT TYPE="button" VALUE="Create Rows" onclick="createRows()">
<TABLE BORDER=1 ID="oTable">
</TABLE>