tr

< html‎ | elements
Jump to: navigation, search

tr



Summary

The tr element represents a row of cells in a table.


Overview Table

DOM Interface HTMLTableRowElement

Examples

[This example uses the TR element with the TABLE, TD, and TR elements to create a table with two rows. View live example]The following examples show how to create a table row in HTML and script.

<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>

Notes

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.

Standards information


HTML information

{

Compatibility

Desktop

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support ? ? ? ? ?

Mobile

Feature Android BlackBerry Chrome for mobile Firefox Mobile (Gecko) IE Mobile Opera Mobile Opera Mini Safari Mobile
Basic support ? ? ? ? ? ? ? ?

See also

Related pages (MSDN)

Attribution

This article contains content originally from external sources.

Portions of this content come from the Microsoft Developer Network: [Windows Internet Explorer API reference Article]