Il tag <TD> in HTML

In questa lezione del corso HTML di StemKB ti parlo del tag <td>.

Il tag <td> definisce le celle all'interno di una tabella in un documento HTML.

Tra il tag di apertura <td> e quello di chiusura </td> puoi inserire il contenuto della cella.

Nota. La sigla <td> significa "table data". Ogni cella della tabella può contenere diverse tipologie di dati. Ad esempio, numeri, testo, immagini o altri elementi HTML.

Per utilizzare il tag <td> devi prima definire una tabella utilizzando il tag <table> e, all'interno di quest'ultimo, utilizzare il tag <tr> per definire una riga.

Ecco un esempio pratico.

Crea una tabella composta da due righe e due colonne.

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

La tabella è così composta

La tabella è compresa tra i tag <table> e </table>.
Ogni riga della tabella è compresa tra i tag <tr> e </tr>.
Ogni cella di ogni riga della tabella è definita tra i tag <td> e </td>.

Quindi, per creare ogni cella nella riga, è necessario utilizzare il tag <td>.

Il browser visualizza la tabella in questo modo.

Cella 1	Cella 2
Cella 3	Cella 4

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

<!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 sempre il tag <td> all'interno di un tag <tr> e di definire il numero di tag <td> in base al numero di colonne che vuoi creare.

Gli attributi del tag <td>

Il tag <td> ha anche diversi attributi che puoi usare per personalizzare le celle.

colspan
L'attributo "colspan" ti permette di unire diverse celle in una sola cella. In questo modo puoi creare tabelle più complesse.

<table>
<tr>
<td colspan="2">Contenuto 1 e 2 combinati in una sola cella</td>
</tr>
<tr>
<td>Contenuto 3</td>
<td>Contenuto 4</td>
</tr>
</table>

Questo ti permette di creare una tabella con due righe e due colonne in cui la prima riga ha un'unica cella che utilizza l'attributo "colspan". La seconda riga ha invece due celle separate.

Contenuto 1 e 2 combinati in una sola cella
Contenuto 3	Contenuto 4

rowspan
L'attributo "rowspan" puoi usarlo per unire due o più celle che si trovano su diverse righe. In questo modo, è possibile creare tabelle con celle più grandi che coprono più righe o colonne.

<table>
<tr>
<td>Contenuto 1</td>
<td>Contenuto 2</td>
<td rowspan="2">Contenuto 3 e 4 combinati in una sola cella</td>
</tr>
<tr>
<td>Contenuto 5</td>
<td>Contenuto 6</td>
</tr>
<tr>
<td>Contenuto 7</td>
<td>Contenuto 8</td>
<td>Contenuto 9</td>
</tr>
</table>

Questo esempio crea una tabella con tre righe e tre colonne. La terza cella della prima e della seconda riga viene unita, creando una cella più grande.

Contenuto 1	Contenuto 2	Contenuto 3 e 4 combinati in una sola cella
Contenuto 5	Contenuto 6	Contenuto 3 e 4 combinati in una sola cella
Contenuto 7	Contenuto 8	Contenuto 9

align
Ti permette di allineare in orizzontale il contenuto della cella a sinistra, a destra o al centro.
<td align="left">Contenuto</td>
valign
Ti permette di allineare in verticale il contenuto della cella in alto, al centro o in basso.
<td valign="top">Contenuto</td>2
width
Imposta la larghezza della cella
height2
Imposta l'altezza della cella.
abbr
Indica al browser di abbreviare il contenuto della cella se lo spazio è insufficiente.
header
Imposta le celle di intestazione
axis
imposta le coordinate logiche di una cella
nowrap
Indica al browser di non adattare il testo alle dimensioni della cella.
style
Ti consente di applicare uno stile CSS alla cella.

Nota. Gli attributi align, valign, width, height e molti altri sono ancora funzionanti ma ormai obsoleti. Oggi puoi personalizzare la formattazione delle celle e l'aspetto della tabella utilizzando uno stile CSS.

Le proprietà CSS del tag <td>

Un foglio di stile CSS ti permette di modificare il colore di sfondo, il colore del testo e il tipo di carattere utilizzati all'interno delle celle della tabella e altro ancora.

Ad esempio, per impostare la larghezza di una colonna, puoi usare la proprietà width del CSS.

<td style="width: 50%;">Contenuto</td>

In questo esempio, hai impostato la larghezza della colonna al 50% della larghezza della tabella.

Per allineare il contenuto all'interno di una cella, puoi utilizzare la proprietà text-align.

<td style="text-align: center;">Contenuto</td>

In questo caso, hai centrato il contenuto della cella.

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

<td style="border: 1px solid black;">Contenuto</td>

In questo esempio, hai impostato un bordo di 1 pixel di spessore e nero intorno alla cella.

Sono solo alcuni esempi di proprietà CSS. Ne esistono molte altre che puoi applicare al tag <td>.

Inoltre, ricorda che puoi anche inserire più proprietà CSS contemporaneamente nell'attributo style, separandole tra loro con un punto e virgola.

Nota. L'attributo "style" ti permette di definire lo stile CSS a una singola cella della tabella. Se vuoi applicare lo stesso stile a tutte le celle ti consiglio di definire lo stile della tabella tramite un file CSS esterno.

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

In questo modo riduci la dimensione del documento HTML ed è più semplice modificare il design della pagina web in futuro.