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:

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

You can use the table, table row, and table column elements in a table and align the content inside the cells with CSS:

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Adding the background-color to a table row and table with CSS:

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Here is an example of the vertical align content with in <tr> tag using CSS:

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

The <th> element describe the table headers above the <tr> tag:

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

An example of a caption for a table is shown here:

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

You can set more than two rows and two columns by using the rowspan and colspan attributes. Here is how:

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Table Of Content-

Tag <tr> In 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.

We value your feedback.

Tag <tr> In HTML

Example:

Example:

Example:

Example:

Example:

Example:

Example:

Tag Tr Uses

Browser Compatibility

Attributes

Global

Event

Predefined CSS

HTML Tag Tr Advantages

Feeling bored?