Tag HTML <thead>
Il tag HTML <thead> raggruppa le righe di intestazione di una tabella. Sintassi, accessibilità con scope e CSS, con esempi.
Il tag <thead> definisce l'intestazione di una tabella HTML. Il tag viene utilizzato insieme ai tag <tbody> e <tfoot>, che specificano rispettivamente il corpo e il piè di pagina della tabella.
Il tag <thead> deve essere utilizzato come figlio dell'elemento <table>, dopo gli elementi <caption> e <colgroup> e prima degli elementi <tbody>, <tfoot> e <tr>. È possibile utilizzare un solo tag <thead> all'interno di un <table>.
In HTML5 il tag <tfoot> può essere posizionato prima o dopo <tbody> — il browser renderizza il piè di pagina in fondo alla tabella in entrambi i casi. (Nella precedente specifica HTML 4.01 il <tfoot> doveva precedere il <tbody>; questo requisito è stato eliminato in HTML5.)
Perché il tag <thead> è importante
Raggruppare le righe di intestazione nel <thead> non riguarda solo un markup ordinato. Fornisce alla tabella una vera struttura semantica che browser e tecnologie assistive possono sfruttare:
- I lettori di schermo possono identificare e annunciare le celle di intestazione, aiutando gli utenti a capire il significato di ogni cella dati mentre navigano nella tabella.
- Stampa e tabelle lunghe: quando una tabella si estende su più pagine stampate (o scorre all'interno di un contenitore a altezza fissa), i browser possono ripetere le righe
<thead>in cima a ogni pagina o sezione, in modo che le colonne rimangano etichettate. - Stile e scripting diventano più semplici: è possibile selezionare
theadin CSS o ordinare solo le righe del corpo in JavaScript senza toccare l'intestazione.
Affinché la struttura sia significativa, inserire celle <th scope="col"> all'interno di <thead> — vedere la sezione Accessibilità di seguito.
Il <thead> deve contenere almeno un elemento <tr>.
Gli elementi <thead>, <tbody> e <tfoot> non influenzano il layout della tabella per impostazione predefinita. Utilizzare le proprietà CSS per personalizzare l'aspetto della tabella.
Sintassi
Il tag <thead> viene usato in coppia. Il contenuto è scritto tra i tag di apertura (<thead>) e di chiusura (</thead>).
<table>
<thead>
<tr>
<th scope="col"> ... </th>
</tr>
</thead>
<tbody> ... </tbody>
<tfoot> ... </tfoot>
</table>Esempio del tag HTML <thead>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
width: 80%;
margin: 30px auto;
border-collapse: collapse;
}
thead {
background-color: #1c87c9;
color: #ffffff;
}
th,
td {
padding: 10px;
border: 1px solid #666666;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th scope="col">Month</th>
<th scope="col">Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>500</td>
</tr>
<tr>
<td>February</td>
<td>1000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>1500</td>
</tr>
</tfoot>
</table>
</body>
</html>Accessibilità
Il tag <thead> acquisisce il suo valore principalmente attraverso l'accessibilità. Per sfruttarne appieno i benefici, usare <th> (non <td>) al suo interno e aggiungere l'attributo scope:
<thead>
<tr>
<th scope="col">Month</th>
<th scope="col">Savings</th>
</tr>
</thead>scope="col" indica ai lettori di schermo che la cella è l'intestazione dell'intera colonna. Man mano che l'utente scende nella colonna, la tecnologia assistiva può annunciare l'intestazione prima di ogni cella dati, in modo che la relazione tra un valore (ad esempio, 500) e la sua etichetta (Savings) non vada mai persa. Per un'intestazione che etichetta una riga anziché una colonna, usare scope="row". Vedere il tag <th> per ulteriori informazioni sulle celle di intestazione e sugli scope.
Mantenere i titoli effettivi delle colonne nel <thead> e i riepiloghi o le righe dei totali progressivi nel <tfoot>; questa struttura coerente è ciò che consente ai lettori di schermo, ai fogli di stile di stampa e agli script di gestire correttamente l'intestazione.
Attributi
Tutti gli attributi seguenti sono deprecati e non supportati in HTML5. Sono elencati qui solo per consentirne il riconoscimento nel markup legacy. Usare invece CSS — vedere Sostituzione degli attributi deprecati con CSS.
| Attributo | Valori | Descrizione |
|---|---|---|
| align | left, right, center, justify, char | Allineamento orizzontale del contenuto all'interno di un <thead>. Non supportato in HTML5. |
| bgcolor | color (nome o esadecimale) | Colore di sfondo delle righe all'interno di un <thead>. Non supportato in HTML5. |
| char | character | Allinea il contenuto a un carattere; usato solo con align="char". Non supportato in HTML5. |
| charoff | number | Offset (in caratteri) rispetto al carattere impostato da char; usato solo con align="char". Non supportato in HTML5. |
| valign | top, bottom, middle, baseline | Allineamento verticale del contenuto all'interno di un <thead>. Non supportato in HTML5. |
Il tag <thead> supporta anche gli Attributi Globali e gli Attributi Evento.
Sostituzione degli attributi deprecati con CSS
Ogni attributo di presentazione sopra elencato ha un equivalente CSS diretto che è consigliabile usare al suo posto:
| Attributo precedente | Sostituzione CSS |
|---|---|
align="center" | text-align: center; |
valign="middle" | vertical-align: middle; |
bgcolor="#f2f2f2" | background-color: #f2f2f2; |
char / charoff | Nessun equivalente CSS; allineare i numeri con text-align o padding. |
Un'intestazione tipicamente formattata ha questo aspetto:
thead {
background-color: #f2f2f2;
font-weight: bold;
}
thead th {
text-align: center;
vertical-align: middle;
padding: 10px;
}Per ulteriori opzioni di stile delle tabelle, vedere CSS Tables.