HTML <tr> tr tag
The <tr> tag in HTML is used to define a table row within a table. It represents a single row of cells in a table, and it is a container for table data (<td>) or table header cells (<th>).
Key Features:
- Row Definition: Encapsulates a row of cells in a table, either data cells or header cells.
- Table Structure: Works in conjunction with
<thead>,<tbody>, and<tfoot>to structure a table. - Cell Containment: Contains one or more
<td>(table data) or<th>(table header) elements, which represent individual cells in the row.
Basic Syntax:
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>Sum</td>
</tr>
</tfoot>
</table>
In this example:
- The
<tr>tag defines rows within the<thead>,<tbody>, and<tfoot>sections of the table. - Each
<tr>contains multiple<th>or<td>elements.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TR Tag Example</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f4f4f4;
}
</style>
</head>
<body>
<h1>Table with TR Example</h1>
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td>
<td>30</td>
<td>New York</td>
</tr>
<tr>
<td>Bob</td>
<td>25</td>
<td>Los Angeles</td>
</tr>
<tr>
<td>Carol</td>
<td>28</td>
<td>Chicago</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>83</td>
<td></td>
</tr>
</tfoot>
</table>
</body>
</html>
In this example:
- The
<tr>tag is used to define rows in the table's header, body, and footer sections.
Attributes:
The <tr> tag does not have specific attributes but is used in combination with other table-related tags:
<thead>: Groups header rows.<tbody>: Groups body rows.<tfoot>: Groups footer rows.
Use Cases:
- Row Definition: Essential for defining rows in a table, organizing data or header information into a structured format.
- Data Organization: Helps in structuring data and making it readable and organized within a table.
Best Practices:
- Table Structure: Use
<tr>within<thead>,<tbody>, and<tfoot>to maintain a clear and structured table layout. - Consistent Number of Cells: Ensure each row contains the same number of cells to maintain a proper table layout and alignment.
- Accessibility: Use
<thead>,<tbody>, and<tfoot>to enhance table accessibility and provide context for screen readers.
Key Points:
- Purpose: The
<tr>tag defines a row in a table, containing table data or header cells. - Usage: Works with
<thead>,<tbody>, and<tfoot>to structure and organize table content. - Layout: Ensures proper table layout and alignment by defining rows and organizing cells within those rows.
In summary, the <tr> tag in HTML is used to define and structure rows within a table. It is a fundamental element for organizing table content and works in conjunction with other table tags to create a well-structured and readable table layout.