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.

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

<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

HTML 5.1: W3C Working Draft
HTML 5: W3C Recommendation
HTML 4.01: W3C Recommendation

Attributions

Microsoft Developer Network: [Windows Internet Explorer API reference Article]

tr