Tag < tr> Em HTML

Este post discutirá Tag Tr com exemplos e referências relevantes. Este post contém muitas informações que você pode usar como uma ferramenta de aprendizado.

A tag <tr> em HTML significa “linha da tabela”. É usado para definir uma linha dentro de uma tabela HTML. A tag <tr> geralmente é usada em combinação com as tags <table> e <td> para criar tabelas com várias linhas e colunas.

A seguinte tabela HTML tem cinco linhas e duas células:

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

Você pode usar os elementos table, table row e table column em uma tabela e alinhar o conteúdo dentro das células com 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

Adicionando a cor de fundo a uma linha de tabela e tabela com 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

Aqui está um exemplo do conteúdo de alinhamento vertical com a tag <tr> usando 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

O elemento <th> descreve os cabeçalhos da tabela acima da tag <tr> :

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

Um exemplo de legenda para uma tabela é mostrado aqui:

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

Você pode definir mais de duas linhas e duas colunas usando os atributos rowspan e colspan . Aqui está como:

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
Índice-

Tag Tr usa

A Tag Tr <tr> indica uma linha dentro de uma tabela HTML.

Um elemento com uma tag <tr> pode incluir uma ou mais tags <th> ou <td> .

Aqui estão alguns usos comuns da tag <tr> :

  • A tag <tr> é usada para criar linhas em uma tabela HTML. Cada tag <tr> representa uma nova linha na tabela.
  • A tag <tr> é usada em combinação com a tag <td> para definir os dados em cada célula de uma linha da tabela. Cada tag <td> representa uma nova célula na linha.
  • A tag <tr> pode ser usada com CSS para aplicar estilos às linhas da tabela, como definir a cor de fundo ou o tamanho da fonte.
  • A tag <tr> pode ser usada com as tags <thead>, <tbody> e <tfoot> para agrupar as linhas da tabela em seções. Isso pode facilitar o estilo ou a manipulação de certas partes da mesa.

Compatibilidade do navegador

Elemento
<tr> Sim Sim Sim Sim Sim

Atributos

Global

A Tag <tr> também acomoda Atributos Globais em HTML.

Evento

A Tag Tr <tr> também aceita Atributos de Evento em HTML.

CSS predefinido

A maioria dos navegadores provavelmente exibirá o elemento Tag Tr <tr> com os valores listados abaixo:

tr {
display: table-row;
vertical-align: inherit;
border-color: inherit;
}

Vantagens do HTML Tag Tr

A tag <tr> em HTML oferece várias vantagens que a tornam uma tag útil para criar tabelas:

  • As tabelas criadas com a tag <tr> fornecem uma maneira estruturada de apresentar os dados, o que facilita a leitura e a compreensão dos usuários.
  • Tabelas criadas com a tag <tr> podem ser facilmente lidas por leitores de tela, tornando o conteúdo acessível a usuários com deficiência visual.
  • As tabelas criadas com a tag <tr> podem ser facilmente personalizadas com CSS, permitindo que os designers as estilizem para combinar com a aparência de seu site.
  • As tabelas criadas com a tag <tr> podem se tornar responsivas com CSS, permitindo que se adaptem a diferentes tamanhos de tela e dispositivos.
  • As tabelas criadas com a tag <tr> são suportadas por todos os navegadores modernos, garantindo que o conteúdo seja acessível a uma ampla gama de usuários.
Se este artigo em algum lugar o ajudou a aprender algo único e informativo, compartilhe essas informações significativas com seus amigos clicando nos links abaixo.
Nós valorizamos o seu feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
Assine a nossa newsletter
Digite seu e-mail para receber um resumo semanal de nossos melhores posts. Saber mais!
ícone
Ao assinar, você concorda com nossa política de privacidade e nossos termos de serviço.