tr element | tr object
[This documentation is preliminary and is subject to change.]
Specifies a row in a table.
  |
Standards information
- Document Object Model (DOM) Level 2 HTML Specification, Section 1.6.5
- HTML 4.01 Specification, Section 11.2.5
HTML information
| Closing Tag | required |
|---|---|
| CSS Display | block |
DOM Information
Inheritance Hierarchy
Remarks
The TD and TH elements are valid within a row.
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 cells using the insertCell and deleteCell methods. To change the content of a particular cell, use the innerHTML or innerText property.
The table object and its associated elements have a separate table object model, which uses different methods than the general object model. For more information on the table object model, see Building Tables Dynamically.
Windows Internet Explorer 8 will only render tables up to 1000 columns. To force Windows Internet Explorer 7 rendering mode, see How Do I Take Advantage of the New Features in Internet Explorer 8.
Examples
The following examples show how to create a table row in HTML and script.
This example uses the TR element with the TABLE, TD, and TR elements 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>
See also
- Reference
- table
- borderCollapse
- Conceptual
- Building Tables Dynamically
Build date: 3/8/2012
