HTML <tr> Tag – Table Row
📌 Introduction
The <tr> tag defines a table row in an HTML table.
Each row contains table cells:
<th>→ header cells<td>→ data cells
👉 Every row in a table must be wrapped in a <tr>.
🧱 Syntax
<table>
<tr>
<td>Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
</tr>
</table>
💡 Example
<!DOCTYPE html>
<html>
<head>
<title>TR Example</title>
</head>
<body>
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>yourName</td>
<td>20</td>
</tr>
<tr>
<td>Sara</td>
<td>22</td>
</tr>
</table>
</body>
</html>
🖥️ Output Explanation
- Each
<tr>creates a horizontal row - Inside each row, you place:
<th>for headers<td>for data
🎯 Why <tr> is Important
1. 🧱 Table Structure
Tables are built row by row using <tr>.
2. 📊 Organizes Data
Each row represents one record:
- Person
- Product
- Item
3. ⚙️ Works with All Table Parts
<tr> is used inside:
<thead><tbody><tfoot>
🧩 Example with Full Structure
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>yourName</td>
<td>20</td>
</tr>
<tr>
<td>Sara</td>
<td>22</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">End of Table</td>
</tr>
</tfoot>
</table>
⚖️ <tr> in Context
| Tag | Role |
|---|---|
<tr> |
Row container |
<td> |
Data inside row |
<th> |
Header inside row |
🎨 Styling Example
<tr style="background-color:#f0f0f0;">
<td>yourName</td>
<td>20</td>
</tr>
🚫 Common Mistakes
- Using
<td>without<tr>❌ - Forgetting rows in tables ❌
- Mixing structure incorrectly ❌
🧪 Mini Exercise
Create a table with:
- At least 3
<tr>rows - First row as header (
<th>) - Two columns (Name, Age)
- Add border styling