Tag HTML <tr>
Il tag HTML <tr> definisce una riga in una tabella, contenendo le celle <th> e <td>. Scopri attributi e stili CSS con esempi.
Il tag HTML <tr> definisce una riga in una tabella. È un contenitore: un <tr> contiene le celle di quella riga, e ogni cella è scritta con <th> (una cella di intestazione) o <td> (una cella dati standard). Una tabella viene costruita sovrapponendo righe <tr>, e il browser allinea le celle di ogni riga in colonne.
Questa pagina illustra cosa fa <tr>, dove si colloca in una tabella, i suoi attributi (e perché quelli vecchi sono stati rimossi), e come stilizzare le righe con CSS.
<tr> deve essere posizionato all'interno di un elemento <table> — direttamente, oppure all'interno di uno degli elementi di raggruppamento delle righe <thead>, <tbody> o <tfoot>. Un <tr> può contenere solo celle <td> e <th>.
Ogni riga può contenere un numero diverso di celle. Il browser renderizza esattamente le celle che hai scritto; non aggiunge automaticamente celle vuote a una riga più corta. Per lasciare una cella vuota, aggiungi un <td> o <th> vuoto.
Nota:
<tr>di per sé non si estende su colonne o righe. Gli attributicolspanerowspanche uniscono celle attraverso colonne o righe si trovano sulle celle, non sulla riga — vedi<td>e<th>.
Per controllare l'aspetto delle righe e delle tabelle (colori, bordi, allineamento), usa le proprietà CSS per le tabelle invece degli attributi HTML.
Sintassi
Il tag <tr> viene usato in coppia. Il contenuto è scritto tra il tag di apertura (<tr>) e quello di chiusura (</tr>).
Sintassi del tag HTML <tr>
<table>
<tr>
<td>...</td>
</tr>
</table>Esempio del tag HTML <tr>:
Esempio del 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>Il primo <tr> contiene due celle di intestazione <th>; ogni <tr> successivo contiene due celle dati <td>. Poiché ogni riga ha lo stesso numero di celle, si allineano ordinatamente in due colonne.
Raggruppare le righe con <thead>, <tbody> e <tfoot>
Per tabelle più grandi di una semplice tabella elementare, raggruppa le righe. Le righe di intestazione vanno dentro <thead>, le righe del corpo dentro <tbody>, e le righe di riepilogo/piè di pagina dentro <tfoot>. Le righe <tr> vivono all'interno di questi gruppi. Questo rende il markup più chiaro, permette alle tecnologie assistive di annunciare correttamente la tabella, e fornisce agganci puliti per il 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>Attributi
Il tag <tr> non ha attributi propri. Supporta solo gli Attributi Globali standard (come class, id, style) e gli Attributi Evento.
Gli attributi di presentazione elencati di seguito erano disponibili nel vecchio HTML ma sono obsoleti in HTML5. Usa invece il CSS.
| Attributo obsoleto | Cosa faceva | Sostituzione CSS |
|---|---|---|
align | Allineamento orizzontale del contenuto della cella | text-align: left / center / right; |
valign | Allineamento verticale del contenuto della cella | vertical-align: top / middle / bottom; |
bgcolor | Colore di sfondo della riga | background-color: …; |
bordercolor | Colore del bordo | border-color: …; |
char / charoff | Allinea il contenuto su un carattere | Nessun equivalente CSS (raramente necessario) |
Non usare align, valign, bgcolor, bordercolor, char o charoff su <tr>. I browser potrebbero ignorarli e sono HTML5 non valido. Applica invece text-align, vertical-align e background-color nel CSS.
Come stilizzare un tag HTML <tr>
Stilizza le righe con CSS puntando all'elemento <tr>. Un pattern comune è la rigatura zebrata — ombreggiare righe alternate per rendere più facile la lettura di tabelle lunghe. Il selettore tr:nth-child(even) corrisponde a ogni seconda riga:
<!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>Qui thead tr colora la riga di intestazione, tbody tr:nth-child(even) ombreggia la 2ª e la 4ª riga del corpo, e tbody tr:hover evidenzia la riga su cui si trova il puntatore.