HTML <tr> Tag
The HTML <tr> tag defines a row in a table, holding its <th> and <td> cells. Learn its attributes and CSS styling with examples.
The HTML <tr> tag defines a row in a table. It is a container: a <tr> holds the cells of that row, and each cell is written with <th> (a header cell) or <td> (a standard data cell). A table is built by stacking <tr> rows, and the browser lines up the cells of each row into columns.
This page covers what <tr> does, where it belongs in a table, its attributes (and why the old ones are gone), and how to style rows with CSS.
<tr> must be placed inside a <table> element — either directly, or inside one of the row-grouping elements <thead>, <tbody>, or <tfoot>. A <tr> may contain only <td> and <th> cells.
Each row can contain a different number of cells. The browser renders exactly the cells you write; it does not automatically pad a short row with empty cells. To leave a cell blank, add an empty <td> or <th>.
Note:
<tr>itself never spans columns or rows. Thecolspanandrowspanattributes that merge cells across columns or rows live on the cells, not the row — see<td>and<th>.
To control the look of rows and tables (colors, borders, alignment), use CSS table properties rather than HTML attributes.
Syntax
The <tr> tag comes in pairs. The content is written between the opening (<tr>) and closing (</tr>) tags.
Syntax of HTML <tr> Tag
<table>
<tr>
<td>...</td>
</tr>
</table>Example of the HTML <tr> tag:
Example of HTML <tr> Tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
width: 80%;
margin: 30px auto;
border-collapse: collapse;
}
th,
td {
padding: 10px;
border: 1px solid #666;
}
</style>
</head>
<body>
<table>
<tr>
<th>Month</th>
<th>Date</th>
</tr>
<tr>
<td>March</td>
<td>10.09.2018</td>
</tr>
<tr>
<td>June</td>
<td>18.07.2018</td>
</tr>
</table>
</body>
</html>The first <tr> holds two <th> header cells; each following <tr> holds two <td> data cells. Because every row has the same number of cells, they align neatly into two columns.
Grouping rows with <thead>, <tbody> and <tfoot>
For anything larger than a trivial table, group your rows. The header rows go inside <thead>, the body rows inside <tbody>, and any summary/footer rows inside <tfoot>. The <tr> rows live inside these groups. This makes the markup clearer, lets assistive technology announce the table correctly, and gives you clean hooks for CSS.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
width: 80%;
margin: 30px auto;
border-collapse: collapse;
}
th,
td {
padding: 10px;
border: 1px solid #666;
}
tfoot {
font-weight: bold;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Item</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Coffee</td>
<td>$3</td>
</tr>
<tr>
<td>Tea</td>
<td>$2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>$5</td>
</tr>
</tfoot>
</table>
</body>
</html>Attributes
The <tr> tag has no attributes of its own. It supports only the standard Global Attributes (such as class, id, style) and the Event Attributes.
The presentational attributes listed below were available in older HTML but are obsolete in HTML5. Use CSS instead.
| Obsolete attribute | What it did | CSS replacement |
|---|---|---|
align | Horizontal alignment of cell content | text-align: left / center / right; |
valign | Vertical alignment of cell content | vertical-align: top / middle / bottom; |
bgcolor | Row background color | background-color: …; |
bordercolor | Border color | border-color: …; |
char / charoff | Align content on a character | No CSS equivalent (rarely needed) |
Do not use align, valign, bgcolor, bordercolor, char, or charoff on <tr>. Browsers may ignore them, and they are invalid HTML5. Apply text-align, vertical-align, and background-color in CSS instead.
How to style an HTML <tr> Tag
Style rows with CSS by targeting the <tr> element. A common pattern is zebra striping — shading alternate rows so long tables are easier to read. The tr:nth-child(even) selector matches every second row:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
width: 80%;
margin: 30px auto;
border-collapse: collapse;
}
th,
td {
padding: 10px;
text-align: left;
border: 1px solid #ccc;
}
thead tr {
background-color: #333;
color: #fff;
}
tbody tr:nth-child(even) {
background-color: #f2f2f2;
}
tbody tr:hover {
background-color: #e0f0ff;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Name</th>
<th>Role</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td>
<td>Designer</td>
</tr>
<tr>
<td>Bob</td>
<td>Developer</td>
</tr>
<tr>
<td>Carol</td>
<td>Manager</td>
</tr>
<tr>
<td>Dave</td>
<td>Tester</td>
</tr>
</tbody>
</table>
</body>
</html>Here thead tr colors the header row, tbody tr:nth-child(even) shades the 2nd and 4th body rows, and tbody tr:hover highlights whichever row the pointer is over.