This reference is built into PageRIJ — a live HTML, CSS & SVG authoring and learning environment.

HTML <tr> element

The <tr> element defines a single row of a table. Everything shown side by side across one line of the table — whether header cells or data cells — is grouped inside one <tr>.

A <tr> contains <td> and <th> cells; text, links, and other displayed content belong inside those cells. Rows normally sit inside <thead>, <tbody>, or <tfoot>. A <table> may also have body rows written directly in its source when it has no explicit body groups, but HTML parsing inserts a <tbody> around them.

How many cells a row appears to have can shift when neighbouring rows use colspan or rowspan — a row with three plain <td> elements might still align under a header row of two cells if one of those header cells spans two columns.

A row can contain a mixture of header and data cells. The example uses a column-heading row followed by a data row whose first cell is a row heading. CSS controls borders and spacing; the row element establishes the table structure.

Attributes: GLOBALS.

Typical layout:
<table>
  <caption>Workshop prices</caption>
  <thead>
    <tr>
      <th scope="col">Workshop</th>
      <th scope="col">Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Flex</th>
      <td>€6</td>
    </tr>
  </tbody>
</table>
Visual representation:
Workshop prices
Workshop Price
Flex €6