Tag HTML <tr>
A tag HTML <tr> define uma linha numa tabela, contendo células <th> e <td>. Saiba mais sobre seus atributos e estilização com CSS.
A tag HTML <tr> define uma linha em uma tabela. Ela funciona como um contêiner: um <tr> armazena as células daquela linha, e cada célula é escrita com <th> (uma célula de cabeçalho) ou <td> (uma célula de dados padrão). Uma tabela é construída empilhando linhas <tr>, e o navegador alinha as células de cada linha em colunas.
Esta página cobre o que o <tr> faz, onde ele pertence em uma tabela, seus atributos (e por que os antigos foram removidos) e como estilizar linhas com CSS.
O <tr> deve ser colocado dentro de um elemento <table> — diretamente ou dentro de um dos elementos de agrupamento de linhas <thead>, <tbody> ou <tfoot>. Um <tr> pode conter apenas células <td> e <th>.
Cada linha pode conter um número diferente de células. O navegador renderiza exatamente as células que você escreve; ele não preenche automaticamente uma linha curta com células vazias. Para deixar uma célula em branco, adicione um <td> ou <th> vazio.
Nota: O
<tr>em si nunca ocupa várias colunas ou linhas. Os atributoscolspanerowspanque mesclam células entre colunas ou linhas pertencem às células, não à linha — veja<td>e<th>.
Para controlar a aparência das linhas e tabelas (cores, bordas, alinhamento), use propriedades de tabela CSS em vez de atributos HTML.
Sintaxe
A tag <tr> vem em pares. O conteúdo é escrito entre as tags de abertura (<tr>) e fechamento (</tr>).
Sintaxe da Tag HTML <tr>
<table>
<tr>
<td>...</td>
</tr>
</table>Exemplo da tag HTML <tr>:
Exemplo da Tag HTML <tr>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
width: 80%;
margin: 30px auto;
border-collapse: collapse;
}
th,
td {
padding: 10px;
border: 1px solid #666;
}
</style>
</head>
<body>
<table>
<tr>
<th>Month</th>
<th>Date</th>
</tr>
<tr>
<td>March</td>
<td>10.09.2018</td>
</tr>
<tr>
<td>June</td>
<td>18.07.2018</td>
</tr>
</table>
</body>
</html>O primeiro <tr> contém duas células de cabeçalho <th>; cada <tr> seguinte contém duas células de dados <td>. Como cada linha tem o mesmo número de células, elas se alinham perfeitamente em duas colunas.
Agrupando linhas com <thead>, <tbody> e <tfoot>
Para tabelas maiores do que algo trivial, agrupe suas linhas. As linhas de cabeçalho vão dentro de <thead>, as linhas do corpo dentro de <tbody> e as linhas de rodapé/resumo dentro de <tfoot>. As linhas <tr> ficam dentro desses grupos. Isso torna a marcação mais clara, permite que tecnologias assistivas anunciem a tabela corretamente e fornece seletores limpos para CSS.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
width: 80%;
margin: 30px auto;
border-collapse: collapse;
}
th,
td {
padding: 10px;
border: 1px solid #666;
}
tfoot {
font-weight: bold;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Item</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Coffee</td>
<td>$3</td>
</tr>
<tr>
<td>Tea</td>
<td>$2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>$5</td>
</tr>
</tfoot>
</table>
</body>
</html>Atributos
A tag <tr> não possui atributos próprios. Ela suporta apenas os Atributos Globais padrão (como class, id, style) e os Atributos de Evento.
Os atributos de apresentação listados abaixo estavam disponíveis em versões mais antigas do HTML, mas são obsoletos no HTML5. Use CSS em vez deles.
| Atributo obsoleto | O que fazia | Substituto CSS |
|---|---|---|
align | Alinhamento horizontal do conteúdo da célula | text-align: left / center / right; |
valign | Alinhamento vertical do conteúdo da célula | vertical-align: top / middle / bottom; |
bgcolor | Cor de fundo da linha | background-color: …; |
bordercolor | Cor da borda | border-color: …; |
char / charoff | Alinha o conteúdo em um caractere | Sem equivalente CSS (raramente necessário) |
Não use align, valign, bgcolor, bordercolor, char ou charoff em <tr>. Os navegadores podem ignorá-los e eles são HTML5 inválido. Aplique text-align, vertical-align e background-color em CSS em vez disso.
Como estilizar uma Tag HTML <tr>
Estilize linhas com CSS direcionando o elemento <tr>. Um padrão comum é o listrado zebra — sombrear linhas alternadas para facilitar a leitura de tabelas longas. O seletor tr:nth-child(even) corresponde a cada segunda linha:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
width: 80%;
margin: 30px auto;
border-collapse: collapse;
}
th,
td {
padding: 10px;
text-align: left;
border: 1px solid #ccc;
}
thead tr {
background-color: #333;
color: #fff;
}
tbody tr:nth-child(even) {
background-color: #f2f2f2;
}
tbody tr:hover {
background-color: #e0f0ff;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Name</th>
<th>Role</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td>
<td>Designer</td>
</tr>
<tr>
<td>Bob</td>
<td>Developer</td>
</tr>
<tr>
<td>Carol</td>
<td>Manager</td>
</tr>
<tr>
<td>Dave</td>
<td>Tester</td>
</tr>
</tbody>
</table>
</body>
</html>Aqui, thead tr colore a linha de cabeçalho, tbody tr:nth-child(even) sombreia a 2ª e 4ª linhas do corpo, e tbody tr:hover destaca a linha sobre a qual o ponteiro está posicionado.