Tag tr

The <tr> tag in HTML is used to define a table row within a <table>. It groups a set of cells horizontally in the table, whether they are header cells (<th>) or data cells (<td>). The <tr> element is fundamental for structuring tabular data clearly and logically.

---

📌 What Is the <tr> Tag?

• Represents a single row of cells in a table.
• Contains one or more <td> (table data) or <th> (table header) elements.
• Must be nested inside <table>, <thead>, <tbody>, or <tfoot>.
• Helps organize data horizontally across the table.

---

✅ Basic Syntax

<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
    <th>Quantity</th>
  </tr>
  <tr>
    <td>Apples</td>
    <td>$1.00</td>
    <td>10</td>
  </tr>
</table>

---

🧩 Attributes of <tr>

Attribute	Description
align (deprecated)	Specifies horizontal alignment of content (left, center, right)
valign (deprecated)	Specifies vertical alignment (top, middle, bottom)
bgcolor (deprecated)	Sets background color for the row
class	Assigns CSS classes for styling
id	Unique identifier for the row

Note: Modern HTML prefers using CSS for styling rather than deprecated attributes.

---

🧪 Example: Multiple Rows in a Table

<table border="1">
  <thead>
    <tr>
      <th>Item</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Notebook</td>
      <td>$5.00</td>
    </tr>
    <tr>
      <td>Pen</td>
      <td>$1.20</td>
    </tr>
  </tbody>
</table>

---

🎨 Styling Rows

You can target rows with CSS for styling:

tr:nth-child(even) {
  background-color: #f9f9f9;
}

tr:hover {
  background-color: #e0e0e0;
}

---

⚠️ Best Practices

• Always wrap rows inside <thead>, <tbody>, or <tfoot> for semantic clarity.
• Use CSS for styling instead of deprecated attributes.
• Use <th> inside header rows for better accessibility.
• Keep your table structure clear for screen readers and SEO.

---

🏁 Summary

The <tr> tag is essential for creating table rows in HTML, organizing data horizontally in rows. Proper use of <tr>combined with <th> and <td> ensures your tables are semantic, accessible, and easy to style.