HTML Element: <tr>
[this page | pdf | back links]
The HTML <tr> element indicates a table
row (within a table). It appears inside a <table> element
and contains <td>
and <th>
elements representing individual cells within the table row.
The attributes
it can take are HTML
global attributes and HTML event attributes.
It used to support the align, bgcolor,
char, charoff and valign
attributes, but these are no longer supported in HTML5.
To create or access such an element in JavaScript
see here. The
corresponding HTML DOM
object supports standard
DOM properties and methods. It also supports the following additional
properties and methods:
Additional properties:
|
Property
|
Description
|
More
|
|
cells
|
Returns collection of all <td> and <th> elements in
row
|
Here
|
|
rowIndex
|
Returns position of row in rows collection of a <table>
element
|
Here
|
|
sectionRowIndex
|
Returns position of row
in rows collection of a <tbody>, <tfoot> or a <thead>
|
Here
|
Additional
methods:
|
Method
|
Description
|
More
|
|
deleteCell()
|
Deletes
a cell from table row
|
Here
|
|
insertCell()
|
Inserts a cell into
table row
|
Here
|
The default style
applicable to this element is shown here.
EXAMPLE:
HTML USED IN THIS EXAMPLE:
<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
<head>
<style>
table,td,th,tr,caption {border: thin solid black; border-collapse: collapse;}
</style>
</head>
<body>
Created using HTML:<br>
<table>
<tr><td>a</td><td>b</td></tr>
</table>
<br>Created using JavaScript:<br>
<span id="element"></span>
<script>
var y4a1 = document.createElement("TD"); y4a1.textContent = "a";
var y4a2 = document.createElement("TD"); y4a2.textContent = "b";
var y4a = document.createElement("TR"); y4a.appendChild(y4a1); y4a.appendChild(y4a2);
var x = document.createElement("TABLE");
x.appendChild(y4a);
document.getElementById("element").appendChild(x);
</script>
</body>
</html>
|
NAVIGATION LINKS
Contents | Prev | Next | HTML Elements