HTML HTML Tutorial HTML Forms HTML Graphics HTML Media HTML APIs HTML Tags



HTML Tag: tr

The HTML tag tr stands for table row. It is used to define a row in an HTML table. The tr tag is always used within the table tag and contains one or more td or th tags.

HTML tables are used to display data in rows and columns. The tr tag is used to define each row in the table. Each row can contain one or more cells, which are defined using the td or th tags.

The tr tag has several attributes that can be used to modify its behavior:

  • align: Specifies the horizontal alignment of the content within the row.
  • bgcolor: Specifies the background color of the row.
  • valign: Specifies the vertical alignment of the content within the row.

Here are some examples of how the tr tag can be used:

Example 1: Simple Table

In this example, we create a simple table with two rows and two columns:

Row 1, Column 1 Row 1, Column 2
Row 2, Column 1 Row 2, Column 2

The HTML code for this table looks like this:

  <table>
    <tr>
      <td>Row 1, Column 1</td>
      <td>Row 1, Column 2</td>
    </tr>
    <tr>
      <td>Row 2, Column 1</td>
      <td>Row 2, Column 2</td>
    </tr>
  </table>

Example 2: Table with Header Row

In this example, we create a table with a header row and two data rows:

Header 1 Header 2
Row 1, Column 1 Row 1, Column 2
Row 2, Column 1 Row 2, Column 2

The HTML code for this table looks like this:

  <table>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
    <tr>
      <td>Row 1, Column 1</td>
      <td>Row 1, Column 2</td>
    </tr>
    <tr>
      <td>Row 2, Column 1</td>
      <td>Row 2, Column 2</td>
    </tr>
  </table>

Example 3: Table with Colspan and Rowspan

In this example, we create a table with cells that span multiple rows and columns:

Header 1 Header 2 Header 3
Row 1, Column 1 Row 1, Column 2 Row 1, Column 3
Row 2, Column 2 and 3
Row 3, Column 1 Row 3, Column 2 Row 3, Column 3

The HTML code for this table looks like this:

  <table>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
    <tr>
      <td rowspan="2">Row 1, Column 1</td>
      <td>Row 1, Column 2</td>
      <td>Row 1, Column 3</td>
    </tr>
    <tr>
      <td colspan="2">Row 2, Column 2 and 3</td>
    </tr>
    <tr>
      <td>Row 3, Column 1</td>
      <td>Row 3, Column 2</td>
      <td>Row 3, Column 3</td>
    </tr>
  </table>

These are just a few examples of how the tr tag can be used in HTML tables. With the help of other HTML tags like td and th, you can create complex tables to display data in a structured way.

Conclusion

The tr tag is an essential part of HTML tables. It is used to define each row in the table and can contain one or more cells, which are defined using the td or th tags. With the help of other HTML tags like colspan and rowspan, you can create complex tables to display data in a structured way.

References

Activity