<tr>

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

Read tr in a complete tableLink

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.