HTML tr Tag

HTML <tr> Tag: Table Row

The <tr> tag in HTML defines a row in a table. Inside <tr>, you place table cells using <td> (table data) for regular cells and <th> (table header) for header cells.

1. Basic Syntax

<table border="1">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

✅ Displays:

Header 1	Header 2
Data 1	Data 2

2. Using <tr> with Multiple Rows

<table border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>30</td>
  </tr>
</table>

✅ Adds multiple rows to the table.

3. Merging Cells with colspan and rowspan

You can span multiple columns or rows using colspan and rowspan.

Column Span (colspan)

<table border="1">
  <tr>
    <th colspan="2">Full Width Header</th>
  </tr>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
</table>

✅ Merges two columns into one.

Row Span (rowspan)

<table border="1">
  <tr>
    <td rowspan="2">Merged Cell</td>
    <td>Row 1, Col 2</td>
  </tr>
  <tr>
    <td>Row 2, Col 2</td>
  </tr>
</table>

✅ Merges two rows into one.

4. Styling <tr> with CSS

<style>
  tr:nth-child(even) { background-color: #f2f2f2; }
  tr:hover { background-color: yellow; }
</style>

<table border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>30</td>
  </tr>
</table>

✅ Alternates row colors and adds a hover effect.

5. Conclusion

• <tr> defines rows in a table.

• Use <td> for data cells and <th> for header cells.

• Use colspan and rowspan to merge cells.

• CSS can style rows for better readability.