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>
| Model | Price |
|---|---|
| Model S | 83,900 |
| Model 3 | 42,900 |
| Model X | 99,990 |
| Model Y | 54,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.
