Il tag <TR> in HTML

In questa lezione della guida HTML ti spiego a cosa serve il tag <tr>.

Il tag <tr> definisce le righe all'interno di una tabella. Ogni tag <tr> identifica una riga della tabella. Quindi, se una tabella ha tre righe, devi inserire tre tag <tr>.

Il contenuto della riga devi inserirlo tra il tag di apertura <tr> e quello di chiusura </tr>.

Nota. La sigla <tr> significa "table row". A sua volta ogni riga della tabella è composta da varie celle e ogni cella si trova dentro un tag <td>. Quindi, il tag <tr> devi utilizzarlo in combinazione con i tag <td> per definire le diverse colonne all'interno della tua tabella.

Puoi utilizzare il tag <tr> all'interno del tag <table> che definisce una tabella.

Ecco un esempio pratico.

Crea una tabella composta da due righe e tre colonne.

<table>
<tr>
<td>Cella 1</td>
<td>Cella 2</td>
<td>Cella 3</td>
</tr>
<tr>
<td>Cella 4</td>
<td>Cella 5</td>
<td>Cella 6</td>
</tr>
</table>

In questo esempio, stai utilizzando il tag <table> per definire la tabella, i tag <tr> per definire le righe della tabella e i tag <td> per definire le singole celle e le colonne della tabella

Il browser visualizza la tabella in questo modo.

Cella 1	Cella 2	Cella 3
Cella 4	Cella 5	Cella 6

Puoi usare il tag <tr> nella sezione <body> del documento HTML e all'interno del tag <table> .

<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
<table>
<tr><td> 1 </td> <td> 2 </td><td> 3 </td> </tr>
<tr><td> 4 </td> <td> 5 </td><td> 6 </td> </tr>
<tr><td> 7 </td> <td> 8 </td><td> 9 </td> </tr>
</table>
</body>
</html>

Ricorda di utilizzare il tag <tr> soltanto all'interno di un tag <table> e che ogni tag <tr> crea una riga della tabella.

Gli attributi del tag <tr>

Il tag <tr> ha diversi attributi nel linguaggio HTML

align
Questo attributo definisce il tipo di allineamento orizzontale del contenuto all'interno della riga. Puoi impostarlo su "left", "center", "right" o "justify".

<tr align="left"> ... </tr>
valign
Questo attributo definisce il tipo di allineamento verticale del contenuto all'interno della riga. Può essere impostato su "top", "middle" o "bottom".

<tr valign="middle"> ... </tr>
char
Specifica il carattere di riempimento che vuoi usare sulla riga. Generalmente è usato per creare dei bordi intorno alle celle della tabella.
charoff
Specifica la distanza tra il carattere di riempimento e il contenuto della cella.
bgcolor
Questo attributo specifica il colore di sfondo della riga. Puoi indicare il colore usando il nome del colore o il codice esadecimale del colore.
style
Ti consente di applicare uno stile CSS alla riga.

Nota. Gli attributi align, valign, char, charoff, bgcolor e molti altri sono ancora interpretati correttamente dai browser ma ormai questi attributi sono diventati obsoleti. Oggi puoi personalizzare la formattazione delle righe e il design della tabella tramite gli stili CSS.

Le proprietà CSS del tag <tr>

Un foglio di stile CSS ti permette di personalizzare la formattazione del contenuto della riga in modo più completo ed efficiente.

Ad esempio, puoi impostare il colore dello sfondo di una riga usando la proprietà background-color del CSS.

Per impostare il colore del testo nella riga puoi usare la proprietà color.

Per impostare il bordo di una cella, puoi utilizzare la proprietà CSS border.

Inoltre, puoi definire l'allineamento orizzontale tramite la proprietà text-align.

Puoi impostare l'allineamento verticale usando la proprietà vertical-align.

Infine, puoi specificare lo spazio tra il contenuto della riga e il bordo mediante la proprietà padding.

Sono solo alcuni esempi di proprietà. Ne esistono molte altre.

Ricorda che puoi anche indicare più proprietà nell'attributo style, separandole tra loro da un punto e virgola.

Nota. L'attributo "style" ti consente di definire lo stile CSS di una singola riga della tabella. Tuttavia, se vuoi applicare lo stesso stile a tutte le righe della tabella, ti consiglio di definire lo stile del tag <tr> oppure una classe tramite un file CSS esterno.

tr {
background-color: #f2f2f2;
color: #333;
border: 1px solid #ccc;
text-align: center;
vertical-align: middle;
padding: 10px;
}

In questo modo si riduce notevolmente la dimensione del documento e il codice HTML diventa più pulito. Inoltre, è molto più semplice apportare modifiche al design della tabella in futuro.