This page is In Progress

Notice: 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.



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

Overview Table

DOM Interface


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

HTML 5.1
W3C Working Draft
W3C Recommendation
HTML 4.01
W3C Recommendation

See also

Related pages