Il tag <TH> in Html
In questa lezione ti spiego cos'è e a cosa serve il tag <th> del linguaggio HTML.
<th> </th>
Il tag <th> definisce una cella di intestazione di una colonna o di una riga all'interno della tabella del documento HTML.
Puoi inserire l'intestazione tra il tag di apertura <th> e quello di chiusura </th>.
Perché usare il tag TH? La sigla <th> significa "table header". I browser applicano di default uno stile più evidente ai tag <th> rispetto a quello usato per il tag <td>. Ad esempio, visualizzano in grassetto il contenuto tra i tag <th>. Anche i browser vocali usano un'intonazione più marcata. Questo rende più rapida e più facile la comprensione delle informazioni presenti nella tabella da parte degli utenti e anche l'interpretazione dei dati da parte dei motori di ricerca.
Il tag <th> va usato all'interno del tag <tr> che definisce una riga della tabella ( l tag <table> ).
Ti faccio un esempio pratico.
Crea una tabella composta da tre righe e due colonne.
<table>
<tr>
<th>Nome</th>
<th>Cognome</th>
</tr>
<tr>
<td>Paolo</td>
<td>Rossi</td>
</tr>
<tr>
<td>Giuseppe</td>
<td>Verdi</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>.
- La prima riga ha due celle di intestazione tra i tag <th> e </th> che indicano l'informazione contenuta nelle rispettive colonne della tabella.
- Le seconda e la terza riga hanno delle celle definite tra i tag <td> e </td> in cui sono visualizzati i dati.
Grazie alla presenza del tag <th> il browser visualizza la tabella mettendo in evidenza le celle di intestazione delle colonne.
| Nome | Cognome |
|---|---|
| Paolo | Rossi |
| Giuseppe | Verdi |
Qual è la differenza tra le celle di intestazione e le celle dei dati? Le celle di intestazione forniscono un'informazione di contesto utile all'utente che li aiuta a interpretare correttamente i dati sulla relativa colonna o riga della tabella. Al contrario, le celle di dati contengono i dati veri e propri e non devono essere contrassegnate come intestazioni.
In generale, puoi utilizzare il tag <th> solo nella sezione <body> del documento HTML.
- <!DOCTYPE html>
- <html>
- <head>
- ...
- </head>
- <body>
- <table>
- <tr> <th> 1 </th> <th> 2 </th> <th> 3 </th> </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>
Nota. Quest'ultimo è solo un esempio pratico di una tabella con le intestazioni sulla prima riga. In realtà, non occorre che tutte le celle di una riga siano tutte composte da tag <th> o che sia necessariamente la prima riga della tabella.
Per specificare se la cella di intestazione del tag <th> si riferisce a una riga oppure a una colonna della tabella, puoi utilizzare l'attributo scope.
L'attributo "scope" può assumere questi valori:
- "row" se l'intestazione si riferisce all'intera riga
- "col" se l'intestazione si riferisce all'intera colonna
- "rowgroup" se l'intestazione si riferisce a un gruppo di righe
- "colgroup" se l'intestazione si riferisce a un gruppo di colonne
In questo modo puoi specificare se l'intestazione si riferisce a una singola cella, a una colonna o a una riga.
Questo è molto importante perché consente ai motori di ricerca e ai browser di interpretare correttamente i dati.
<table>
<tr>
<th scope="col">Nome</th>
<th scope="col">Cognome</th>
</tr>
<tr>
<td>Paolo</td>
<td>Rossi</td>
</tr>
<tr>
<td>Giuseppe</td>
<td>Verdi</td>
</tr>
</table>
In questo caso l'attributo scope="col" specifica che le intestazioni sono riferite al gruppo di celle che si trovano nella stessa colonna dell'intestazione.
Perché usare l'attributo scope? In quest'ultimo esempio grazie all'attributo scope i motori di ricerca associano i dati sulla prima colonna all'intestazione "nome" e quelli della seconda colonna all'intestazione "cognome". Inoltre, l'attributo scope migliora anche l'accessibilità e l'usabilità della tabella perché i browser vocali utilizzati dalle persone con disabilità visive leggono ogni cella di dati della colonna anteponendo l'intestazione. Ad esempio, leggono "nome Paolo", "cognome Rossi", e via dicendo. Sono informazioni di contesto molto utili agli utenti che utilizzano screen reader o altre tecnologie assistive.
Altri attributi del tag <th>
Il tag <th> ha anche altri attributi in HTML.
- colspan
L'attributo "colspan" unisce più celle in una sola cella.
<table>
In questo modo ottieni una tabella con un'unica cella nella prima riga. La seconda riga della tabella continua ad avere due celle separate.
<tr>
<th colspan="2">Header 1 e 2 combinati in una sola cella</th>
</tr>
<tr>
<td>Contenuto 3</td>
<td>Contenuto 4</td>
</tr>
</table>
Header 1 e 2 combinati in una sola cella Contenuto 3 Contenuto 4 - rowspan
L'attributo "rowspan" unisce più celle in un'unica riga.<table>
In questo modo ottieni una cella più grande che occupa più righe della tabella.
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th rowspan="2">Header 3 e 4 combinati in una sola cella</th>
</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>
Header 1 Header 2 Header 3 e 4 combinati in una sola cella Contenuto 5 Contenuto 6 Contenuto 7 Contenuto 8 Contenuto 9 - align
Effettua un allineamento orizzontale del contenuto della cella a sinistra, a destra o al centro.<th align="left">Contenuto</th>
- valign
Effettua un allineamento orizzontale del contenuto della cella in alto, al centro o in basso.<th valign="top">Contenuto</th>2
- width
Imposta la larghezza della cella di intestazione - height
Imposta l'altezza della cella di intestazione. - abbr
Indica al browser di abbreviare il contenuto della cella di intestazione se lo spazio è insufficiente. Nei browser vocali l'attributo "abbr" indica al browser di non ripetere per intero l'intestazione in ogni dato bensì in una forma abbreviata.Ad esempio, se l'intestazione <th> è "titolo di studio" e il dato <td> è "diploma", il browser vocale legge soltanto "titolo: diploma" anziché "titolo di studio: diploma".
- bgcolor
definisce il colore di sfondo della cella di intestazione. - color
definisce il colore del testo della cella di intestazione. - char
Specifica il carattere di riempimento da utilizzare per allineare il testo. - charoff
Specifica il rientro del carattere di riempimento rispetto ai bordi della cella. - scope
Indica al browser se l'intestazione si riferisce a un gruppo di celle in colonna o in riga. - nowrap
Indica al browser di non adattare il testo alle dimensioni della cella di intestazione. - style
Ti consente di applicare uno stile CSS alla cella di intestazione.
Molti attributi Html del tag <th> sono obsoleti anche se ancora funzionanti nei browser moderni. Ad esempio, align e valign sono obsoleti perché puoi ottenere lo stesso risultato utilizzando le proprietà di uno stile CSS.
Le proprietà CSS del tag <th>
I fogli di stile CSS ti permettono di personalizzare il colore dello sfondo o del testo, la dimensione e il tipo di carattere, l'altezza e la larghezza di ogni cella di intestazione.
Ad esempio, per impostare la larghezza della cella di intestazione puoi usare la proprietà width del CSS.
<th style="width: 100px;">Contenuto</th>
Per allineare in orizzontale il contenuto all'interno della cella, puoi utilizzare la proprietà text-align.
<th style="text-align: left;">Contenuto</th>
Per impostare il bordo della cella di intestazione puoi utilizzare la proprietà CSS border.
<th style="border: 1px solid black;">Contenuto</th>
Volendo puoi anche indicare più proprietà in un unico attributo stile, separando le proprietà tra loro tramite un punto e virgola.
<th style="text-align: center; vertical-align: top;"> ... </th>
E molto altro ancora. Questi sono solo alcuni esempi di cosa puoi ottenere usando le proprietà CSS sul tag <th>.
Nota. L'attributo "style" è utile se vuoi personalizzare lo stile di una singola cella di intestazione. Se invece vuoi applicare lo stesso stile a tutte le celle di intestazione, ti consiglio di definire lo stile del tag <th> tramite una classe in un file CSS esterno al documento Html. Ad esempio
th {
width: 50%;
background-color: #f0f0f0;
color: #333;
border: 1px solid #ccc;
text-align: center;
vertical-aligNotan: middle;
padding: 10px;
}
In questo modo ottieni un documento HTML più pulito e meno pesante. Inoltre, questo ti permette di modificare il design associato al tag <th> più facilmente in futuro, perché con una sola operazione puoi cambiare lo stile in tutte le pagine del sito web.
