The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.


< html‎ | elements
Jump to: navigation, search


This article is In Progress.


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

Overview Table

DOM Interface HTMLTableRowElement


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


<td>This is the first row.</td>
<td>This is the second row.</td>

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 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.
   // 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>";		
<button onclick="createRows()">Create Rows</button>
<table id="oTable"></table>



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)


This article contains content originally from external sources.

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