tr

This page has been flagged with the following issues:

High-level issues:

Content:

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

Document Object Model (DOM) Level 2 HTML Specification, Section 1.6.5
HTML 4.01 Specification, Section 11.2.5

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

Search

tr

How to Use

tr