Tag <tr> In HTML
This post will discuss Tag Tr with relevant examples and references. This post contains much information that you can use as a learning tool.
The <tr> tag in HTML stands for “table row.” It is used to define a row within an HTML table. The <tr> tag is usually used in combination with the <table> and <td> tags to create tables with multiple rows and columns.
The following HTML table has five rows and two cells:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table>
<tr>
<td>Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
</tr>
<tr>
<td>Row 2 Cell 1</td>
<td>Row 2 Cell 2</td>
</tr>
<tr>
<td>Row 3 Cell 1</td>
<td>Row 3 Cell 2</td>
</tr>
<tr>
<td>Row 4 Cell 1</td>
<td>Row 4 Cell 2</td>
</tr>
<tr>
<td>Row 5 Cell 1</td>
<td>Row 5 Cell 2</td>
</tr>
</table>
</body>
</html>
You can use the table, table row, and table column elements in a table and align the content inside the cells with CSS:
<!DOCTYPE html>
<html>
<head>
<title>Mr Examples</title>
<style>
td {
text-align: center;
vertical-align: top;
}
tr td:nth-child(2) {
text-align: right;
}
</style>
</head>
<body>
<table>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td data-username="Mr Examples">Row 1, Cell 2</td>
<td>Row 1, Cell 3</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
<td>Row 2, Cell 3</td>
</tr>
</table>
</body>
</html>
Adding the background-color to a table row and table with CSS:
<!DOCTYPE html>
<html>
<head>
<title>Mr Examples</title>
<style>
td {
text-align: center;
vertical-align: top;
}
tr td:nth-child(2) {
text-align: right;
}
table {
background-color: #f2f2f2;
}
tr:nth-child(2) td:nth-child(3) {
background-color: maroon;
color:white;
}
</style>
</head>
<body>
<table>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td data-username="Mr Examples">Row 1, Cell 2</td>
<td>Row 1, Cell 3</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
<td>Row 2, Cell 3</td>
</tr>
</table>
</body>
</html>
Here is an example of the vertical align content with in <tr> tag using CSS:
<!DOCTYPE html>
<html>
<head>
<title>Car Inventory</title>
<style>
td {
text-align: center;
vertical-align: middle;
}
table {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<table>
<tr>
<th>Make</th>
<th>Model</th>
<th>Year</th>
<th>Price</th>
</tr>
<tr>
<td>Ford</td>
<td>Mustang</td>
<td>2022</td>
<td>$35,000</td>
</tr>
<tr>
<td>Chevrolet</td>
<td>Camaro</td>
<td>2022</td>
<td>$37,000</td>
</tr>
<tr>
<td>Dodge</td>
<td>Challenger</td>
<td>2022</td>
<td>$38,000</td>
</tr>
</table>
</body>
</html>
The <th> element describe the table headers above the <tr> tag:
<!DOCTYPE html>
<html>
<body>
<table>
<tr>
<th>Make</th>
<th>Model</th>
<th>Year</th>
</tr>
<tr>
<td>Ford</td>
<td>Mustang</td>
<td>2022</td>
</tr>
<tr>
<td>Chevrolet</td>
<td>Camaro</td>
<td>2022</td>
</tr>
<tr>
<td>Dodge</td>
<td>Challenger</td>
<td>2022</td>
</tr>
</table>
</body>
</html>
An example of a caption for a table is shown here:
<!DOCTYPE html>
<html>
<head>
<title>Popular Programming Languages</title>
</head>
<body>
<table>
<caption>List of popular programming languages</caption>
<tr>
<th>Language</th>
<th>Created</th>
<th>Creator</th>
</tr>
<tr>
<td>Java</td>
<td>1995</td>
<td>James Gosling</td>
</tr>
<tr>
<td>Python</td>
<td>1989</td>
<td>Guido van Rossum</td>
</tr>
<tr>
<td>JavaScript</td>
<td>1995</td>
<td>Brendan Eich</td>
</tr>
<tr>
<td>C#</td>
<td>2000</td>
<td>Microsoft</td>
</tr>
</table>
</body>
</html>
You can set more than two rows and two columns by using the rowspan and colspan attributes. Here is how:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table>
<tr>
<td rowspan="3">This cell spans 3 rows</td>
<td colspan="2">This cell spans 2 columns</td>
</tr>
<tr>
<td>This cell is in the second row, first column</td>
<td>This cell is in the second row, second column</td>
</tr>
<tr>
<td>This cell is in the third row, first column</td>
<td>This cell is in the third row, second column</td>
</tr>
</table>
</body>
</html>
Tag Tr Uses
The Tag Tr <tr> indicates a row within an HTML table.
An element with a <tr> tag might include one or more <th> or <td> tags.
Here are some common uses of the <tr> tag:
- The <tr> tag is used to create rows in an HTML table. Each <tr> tag represents a new row in the table.
- The <tr> tag is used in combination with the <td> tag to define the data in each cell of a table row. Each <td> tag represents a new cell in the row.
- The <tr> tag can be used with CSS to apply styles to table rows, such as setting the background color or font size.
- The <tr> tag can be used with the <thead>, <tbody>, and <tfoot> tags to group table rows into sections. This can make it easier to style or manipulate certain parts of the table.
Browser Compatibility
| Element |  | |  | | |
|---|
| <tr> | Yes | Yes | Yes | Yes | Yes |
Attributes
Global
The Tag <tr> also accommodates Global Attributes in HTML.
Event
The Tag Tr <tr> also accepts Event Attributes in HTML.
Predefined CSS
Most browsers will likely display the Tag Tr <tr> element with the values listed below:
tr {
display: table-row;
vertical-align: inherit;
border-color: inherit;
}
HTML Tag Tr Advantages
The <tr> tag in HTML provides several advantages that make it a useful tag for creating tables:
- Tables created with the <tr> tag provide a structured way to present data, which makes it easier for users to read and understand.
- Tables created with the <tr> tag can be easily read by screen readers, making the content accessible to visually impaired users.
- Tables created with the <tr> tag can be easily customized with CSS, allowing designers to style them to match the look and feel of their website.
- Tables created with the <tr> tag can be made responsive with CSS, allowing them to adapt to different screen sizes and devices.
- Tables created with the <tr> tag are supported by all modern web browsers, ensuring that the content is accessible to a wide range of users.
If this article somewhere helped you in learning something unique and informative, do share this meaningful information with your friends by clicking on the links below.
