HTML <tr> Tag
The <tr> tag defines a row within an HTML table. It acts as a container for table cells (<td> or <th>) and plays a crucial role in structuring tabular data. Every row in a table is enclosed within a <tr> tag, which, in turn, is a direct child of either a <table>, <thead>, <tbody>, or <tfoot> element.
Syntax
<tr align="left|center|right|justify|char" bgcolor="color_name|hex_number|rgb_number" char="character" charoff="length" valign="top|middle|bottom|baseline">
<td>...</td>
<td>...</td>
</tr>
Attributes
| Attribute | Value | Description | ||||
|---|---|---|---|---|---|---|
align |
left \ |
center \ |
right \ |
justify \ |
char |
Specifies the horizontal alignment of content within the row. Note: Deprecated in HTML5, use CSS instead. |
bgcolor |
color_name \ |
hex_number \ |
rgb_number |
Specifies the background color for the row. Note: Deprecated in HTML5, use CSS instead. | ||
char |
character | Specifies the alignment character for the row when align="char" is set. Note: Deprecated in HTML5, use CSS instead. |
||||
charoff |
length | Specifies the offset of the alignment character, in pixels. Note: Deprecated in HTML5, use CSS instead. | ||||
valign |
top \ |
middle \ |
bottom \ |
baseline |
Specifies the vertical alignment of content within the row. Note: Deprecated in HTML5, use CSS instead. |
Example
<table>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</table>
More Examples
Basic Table with Header
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>30</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>25</td>
</tr>
</tbody>
</table>
Table with Styling (using CSS)
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Product</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Laptop</td>
<td>$1200</td>
</tr>
<tr>
<td>Tablet</td>
<td>$300</td>
</tr>
</tbody>
</table>
</body>
</html>
Advanced Table structure: using <thead>, <tbody>, and <tfoot>
<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>Footer 1</td>
<td>Footer 2</td>
</tr>
</tfoot>
</table>
Browser Support
| Browser | Supported |
|---|---|
| Chrome | Yes |
| Edge | Yes |
| Firefox | Yes |
| Safari | Yes |
| Opera | Yes |
The <tr> tag is supported by all major modern browsers.
Notes and Tips
- Structure is Key: Use
<thead>,<tbody>, and<tfoot>to structure tables logically. - Accessibility: Use
<th>tags within<tr>tags in your<thead>to indicate table headers, which are beneficial for accessibility. - Styling: Avoid using the deprecated attributes like
align,bgcolor,char,charoff, andvalign. Style your tables using CSS for better control and separation of concerns. - Nested tables: Avoid nesting tables unless absolutely necessary as they can cause layout problems and reduce accessibility. If possible, consider a better alternative data representation like divs and lists.
- Responsive Tables: Tables can be challenging to make responsive. Consider techniques like horizontal scrolling, or stacked table layouts using CSS.
- Avoid Empty Rows: Avoid creating empty rows without data inside
<td>or<th>, they generally provide no useful information to end user or screen reader. - Always ensure the rows are complete: All rows in a table should have same number of cells, either
<td>or<th>, this is essential for proper layout. Missing cells create unexpected table structure.
