tr Table Row HTML Tag

HTML tables are structured in rows, each row containing the same amount of cells (this default can be overridden by using colspan and rowspan). Table rows are marked by the <tr> tag.

Syntax

<table>
  <tr>
    <td>Model S</td><td>$83,900</td>
  </tr>
  <tr>
    <td>Model 3</td><td>$42,900</td>
  </tr>
  <tr>
    <td>Model X</td><td>$99,990</td>
  </tr>
  <tr>
    <td>Model Y</td><td>$54,990</td>
  </tr>
</table>
Model S$83,900
Model 3$42,900
Model X$99,990
Model Y$54,990

A simple table with 4 rows and 2 cells per row.

Tag Hierarchy

The tr tag is used in the header (thead), the body (tbody) and the footer (tfoot) sections as well. Even headers and footers can contain more than one rows.

The child of the row tags is the table cell, marked with th in the header and td in the body and footer.

<table>
  <thead>
    <tr>
      <th>Model</th><th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Model S</td><td>83,900</td>
    </tr>
    <tr class="green">
      <td>Model 3</td><td>42,900</td>
    </tr>
    <tr class="red">
      <td>Model X</td><td>99,990</td>
    </tr>
    <tr>
      <td>Model Y</td><td>54,990</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>-</td><td>USD</td>
    </tr>
  </tfoot>
</table>
ModelPrice
Model S83,900
Model 342,900
Model X99,990
Model Y54,990
-USD

Styling Table Rows

We can style table rows adding inline styles or assigning CSS rules through classes to the tr tags.

<table height="300" width="200">
  <tbody>
    <tr style="vertical-align: bottom;">
      <td>Model S</td>
      <td>$83,900</td>
    </tr>
    <tr style="text-align: right;">
      <td>Model 3</td>
      <td>$42,900</td>
    </tr>
    <tr style="border: 5px dashed green">
      <td>Model X</td>
      <td>$99,990</td>
    </tr>
    <tr class="green">
      <td>Model Y</td>
      <td>$54,990</td>
    </tr>
    <tr style="background: #ccc;">
      <td>CyberTruck</td>
      <td>TBA</td>
    </tr>
  </tbody>
</table>
Model S $83,900
Model 3 $42,900
Model X $99,990
Model Y $54,990
CyberTruck TBA

How to Align Rows In HTML?

In the example above you can see both vertical and horizontal alignment of the text in HTML rows.

Vertical Alignment ↕

HTML tables are often used to align text or other elements

vertical-align: bottom / middle / top;
Further possible values: baseline / length / sub / super / top / text-top / middle / bottom / text-bottom / initial / inherit

Horrizontal Alignment ↔

Horizontal alignment of content inside HTML tables is similar to other tags, such as divs:

text-align: left / center / right

Rowspan and Colspan For Table Rows

<table>
  <tbody>
    <tr>
      <td></td><td></td><td></td>
<td></td><td></td>
</tr> <tr> <td></td> <td colspan="3" bgcolor="#fcdddb">
Colspan=3
</td> <td></td> </tr> <tr> <td></td> <td rowspan="3" bgcolor="#fcdddb">
Row<br />span<br />=3
</td> <td></td><td></td><td></td> </tr> <tr> <td></td><td></td><td></td><td></td> </tr> <tr> <td></td><td></td><td></td><td></td> </tr> <tr> <td></td><td></td><td></td><td></td> </tr> </tbody> </table>
         
  Colspan=3  
  Row
span
=3
     
       
       
       

Example with a 5×6 table where cells are spanning 3 widths horizontally and vertically

Table Row Generator

Now you know how to make rows in a HTML table, you understand how to structure the tag hierarchy. Use the code generator below to build HTML tables instantly. The table generator will add the rows automatically to the HTML code.

2 × 2

Table

Style Name
Georgia
Georgia
Palatino
Times New Roman
Arial
Arial Black
Comic Sans
Impact
Lucida Sans
Tahoma
Trebuchet
Verdana
Courier
Lucida Console
Left Center Right
px
px

Body

Left Center Right

HTML
Preview Apply »
HTML Copy
CSS « Apply