tr

< html‎ | elements
Jump to: navigation, search

tr

This article is In Progress.



Summary

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


Overview Table

DOM Interface HTMLTableRowElement


Compatibility

There is no data available for topic "html", feature "tr". If you think that there should be data available, consider opening an issue.

Examples

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

HTML

<table>
<tbody>
<tr>
<td>This is the first row.</td>
</tr>
<tr>
<td>This is the second row.</td>
</tr>
</tbody>
</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.

HTML

<script type="application/javascript">
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>
<button onclick="createRows()">Create Rows</button>
<table 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.


Related specifications

Specification Status Related Changes
HTML 5.1 W3C Working Draft
HTML 5 W3C Recommendation
HTML 4.01 W3C Recommendation

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]