Tag HTML <caption>
Il tag HTML <caption> definisce un titolo per una tabella. Deve essere il primo figlio di <table>. Sintassi, stile e accessibilità con esempi.
Il tag <caption> viene utilizzato per definire un titolo o una descrizione per una tabella. Non è un'intestazione di colonna (usa <th> per quello). Il tag deve trovarsi all'interno dell'elemento <table> immediatamente dopo il tag di apertura, e deve essere il primo figlio del suo elemento padre <table>. È consentita una sola caption per tabella.
Per impostazione predefinita, la caption di una tabella è centrata sopra la tabella. È possibile utilizzare le proprietà text-align e caption-side per allinearla e posizionarla.
Quando usare <caption> invece di <figcaption>
Esistono due modi per etichettare una tabella, e quello corretto dipende dal contenitore della tabella:
- Usa
<caption>quando la tabella è autonoma. La caption appartiene all'interno del<table>ed è associata a esso in modo programmatico. - Usa
<figcaption>quando la tabella è l'unico contenuto di un elemento<figure>. In tal caso, il figure fornisce l'etichettatura, quindi non si usa una<caption>separata.
<figure>
<table>
<thead>
<tr>
<th>Planet</th>
<th>Diameter (km)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Earth</td>
<td>12,742</td>
</tr>
<tr>
<td>Mars</td>
<td>6,779</td>
</tr>
</tbody>
</table>
<figcaption>Diameters of the inner planets</figcaption>
</figure>Qui la tabella è l'unico contenuto del figure, quindi l'etichetta si trova in <figcaption> (che, a differenza di <caption>, può essere posizionata anche dopo la tabella).
Sintassi
Il tag <caption> viene usato in coppia. Il contenuto è scritto tra il tag di apertura (<caption>) e il tag di chiusura (</caption>).
Esempio del tag HTML <caption>:
Tag HTML <caption>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table { width: 400px; border-collapse: collapse; }
th, td { border: 1px solid #000; padding: 4px; }
</style>
</head>
<body>
<table>
<caption>Evaluation paper</caption>
<thead>
<tr>
<th>Student</th>
<th>1st exam</th>
<th>2nd exam</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Johnson</td>
<td>75</td>
<td>65</td>
</tr>
<tr>
<td>Mary Nicolson</td>
<td>55</td>
<td>80</td>
</tr>
<tr>
<td>Max Thomson</td>
<td>60</td>
<td>47</td>
</tr>
</tbody>
</table>
</body>
</html>Risultato
La tabella renderizzata mostra la caption "Evaluation paper" centrata sopra i dati:
Esempio del tag HTML <caption> con la proprietà CSS caption-side:
Esempio del tag HTML <caption> con la proprietà CSS caption-side
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
caption {
background: #1c87c9;
color: #fff;
caption-side: bottom;
}
table,
th,
td {
border: 1px solid #1c87c9;
padding: 3px;
}
td {
background-color: #cccccc;
color: #666666;
}
</style>
</head>
<body>
<h2>Caption-side property example</h2>
<p>Here the caption-side is set to "bottom":</p>
<table>
<caption>Some title here</caption>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some text</td>
<td>Some text</td>
</tr>
</tbody>
</table>
</body>
</html>Attributi
| Attributo | Valore | Descrizione |
|---|---|---|
| align | left, right, center, top, bottom | Allinea la caption orizzontalmente o verticalmente. Non usato in HTML5. Usa invece la proprietà CSS caption-side. |
Il tag <caption> supporta gli Attributi Globali e gli Attributi Evento.
Accessibilità: perché <caption> è importante
Un <caption> è più di un titolo visibile — è il nome accessibile della tabella. Poiché l'elemento è un figlio di <table>, i browser li associano automaticamente; non è necessario usare aria-labelledby o markup aggiuntivo. Quando uno screen reader entra nella tabella, annuncia prima la caption, fornendo all'utente il contesto ("Evaluation paper, tabella con 3 colonne") prima di leggere qualsiasi cella. Senza una caption, l'utente sente una sequenza di numeri senza capire cosa descrivono.
Quando il titolo deve essere nascosto visivamente
A volte un'intestazione è già vicina alla tabella e una caption visibile sembrerebbe ridondante. Non eliminare la caption — questo rimuove il contesto per gli utenti non vedenti. Invece, mantieni il <caption> e nascondilo visivamente con CSS, lasciandolo nell'albero di accessibilità:
caption.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}Un aria-label sul <table> può anche fornire un nome accessibile, ma <caption> è preferibile: funziona senza ARIA, fa parte del testo del documento (quindi viene tradotto e ricercato), e la tecnica del nascondimento visivo lo rende leggibile agli sviluppatori con vista. Ricorri ad aria-label solo quando non puoi aggiungere una caption al markup.
<caption> sostituisce l'attributo summary deprecato
Il vecchio HTML aveva un attributo summary su <table> che conteneva una descrizione per gli utenti di screen reader. Non era mai visibile ed è obsoleto in HTML5 — non usarlo. Il sostituto moderno e accessibile è un <caption> per il titolo breve, più un normale paragrafo (opzionalmente collegato con aria-describedby) quando è necessaria una spiegazione più lunga della struttura della tabella.
Come applicare lo stile al tag <caption>
La caption è un box a livello di blocco che puoi stilizzare come qualsiasi altro elemento. Le modifiche più comuni riguardano la posizione rispetto alla tabella, l'allineamento e l'enfasi:
caption {
caption-side: bottom; /* move the caption below the table (default is top) */
text-align: left; /* override the default centering */
font-weight: bold;
padding: 6px;
color: #1c87c9;
}Consulta le proprietà caption-side e text-align per maggiori dettagli, e il tag <table> per il markup completo delle tabelle.