<tr> groups header cells and data cells into a row. It belongs inside a table’s <thead>, <tbody>, or <tfoot>, or directly inside a table that has no <tbody> children.
A row in context
Each data row below contains one row header and one count. The browser lays them out in the same two-column grid as the header row.
HTML and CSS
HTML
<table>
<caption>
Workshop registrations
</caption>
<thead>
<tr>
<th scope="col">Workshop</th>
<th scope="col">Places booked</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">HTML basics</th>
<td class="amount">12</td>
</tr>
<tr>
<th scope="row">CSS layout</th>
<td class="amount">8</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row">Total</th>
<td class="amount">20</td>
</tr>
</tfoot>
</table>
CSS
/* Presentation: these styles make the table easier to read. */
table {
border-collapse: collapse;
}
caption {
text-align: left;
font-weight: bold;
margin-bottom: 0.5rem;
}
th,
td {
border: 1px solid #94a3b8;
padding: 0.5rem 0.75rem;
text-align: left;
}
.amount {
text-align: right;
font-variant-numeric: tabular-nums;
}
Edit HTML or CSS to update the preview as you type. Copy code snippet copies the selected tab. Preview spacing and font defaults are not included.
Content and styling
A row contains <th> and <td> cells, plus permitted script-supporting elements. Put ordinary text inside a cell, not directly inside <tr>. A row is not a general-purpose horizontal layout container.
Rows need not have the same number of cell elements: colspan and rowspan can occupy several grid slots. What matters is a coherent grid without overlapping cells or unexplained gaps.
Inspect the result
Add tbody tr:nth-child(even) { background: #eff6ff; } to stripe body rows. Then inspect the DOM: when source HTML omits <tbody>, the HTML parser normally inserts one. This is why table > tr often matches nothing; select tbody > tr instead. Prefer explicit row groups in examples you expect readers to edit.
Sources and browser support
MDN: tr describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.