The `<tr>` tag is an HTML tag that is used to create a table row in HTML. In this tutorial, we’ll go over the basics of the `<tr>` tag, including how to use it and some of the attributes you can use to customize your table rows.
Basic Syntax
The basic syntax for the `<tr>` tag is as follows:
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
As you can see, the `<tr>` tag is used to define a table row, and each cell of the row is defined using the `<td>` tag. You can add as many cells as you want to a row, depending on how many columns your table has.
Attributes
The `<tr>` tag also has several attributes that you can use to customize your table rows. Here are some of the most commonly used attributes:
– `align`: Specifies the horizontal alignment of the content within the row.
– `valign`: Specifies the vertical alignment of the content within the row.
– `bgcolor`: Specifies the background color of the row.
– `height`: Specifies the height of the row.
– `nowrap`: Specifies that the contents of the row should not wrap.
Here’s an example of how you can use some of these attributes:
<tr align=”center” bgcolor=”#CCCCCC” height=”50″>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
In this example, we’re aligning the content of the row to the center, setting the background color to light gray, and setting the height of the row to 50 pixels.
Nesting
The `<tr>` tag is often used in conjunction with the `<table>` tag to create tables. You can nest multiple `<tr>` tags inside a `<table>` tag to create a multi-row table. Here’s an example:
<table>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
<td>Row 1, Cell 3</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
<td>Row 2, Cell 3</td>
</tr>
<tr>
<td>Row 3, Cell 1</td>
<td>Row 3, Cell 2</td>
<td>Row 3, Cell 3</td>
</tr>
</table>
In this example, we’ve created a three-row table, with three cells in each row.
Conclusion
The `<tr>` tag is a powerful HTML tag that allows you to create tables and customize the appearance of your table rows. By using the attributes and syntax we’ve covered in this tutorial, you’ll be able to create tables that are both functional and visually appealing.
