HTML caption: titolo della tabella e posizione sopra o sotto
HTML <caption> fornisce il titolo o una breve descrizione di un'intera tabella. Posizionalo come primo elemento figlio all'interno di table e usa CSS caption-side per controllare se appare sopra o sotto la tabella.
Distinguere i titoli delle tabelle dagli header di colonne e righe
Un caption spiega di cosa tratta la tabella; th identifica una colonna o una riga particolare. Sostituire la didascalia con un td nella prima riga cambia la relazione tra il titolo della tabella e le sue celle di dati. Utilizza un soggetto e un ambito specifici invece di solo “Tabella 1” in modo che i lettori possano identificare lo scopo durante la lettura o la navigazione con tecnologie assistive.
Usa solo un caption per ogni table. Aggiungi interpretazioni dettagliate, avvertenze o fonti dei dati nel testo vicino invece di dividere il titolo della tabella tra più elementi caption.
Esempio completo: controllare la posizione della didascalia
Salva il codice come table-caption.html e aprilo in un browser. I numeri sono dati di esercizio utilizzati per spiegare la struttura della tabella.
<!doctype html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Posizionare il titolo di una tabella</title>
<style>
body { max-width: 36rem; margin: 1rem auto; padding: 0 1rem; }
.jb-table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 0.6rem; border: 1px solid #8c9399; text-align: left; }
caption { caption-side: top; text-align: left; padding: 0.6rem 0; font-weight: bold; }
</style>
</head>
<body>
<h1>Dati di esercitazione</h1>
<div class="jb-table-scroll">
<table class="jb-table-01">
<caption>Numero di documenti di esempio per categoria in una biblioteca di esercitazione</caption>
<thead>
<tr><th scope="col">Categoria</th><th scope="col">Documenti</th></tr>
</thead>
<tbody>
<tr><th scope="row">HTML</th><td>3</td></tr>
<tr><th scope="row">CSS</th><td>2</td></tr>
</tbody>
</table>
</div>
</body>
</html>Sopra la tabella appare la didascalia Numero di documenti di esempio per categoria in una biblioteca di esercitazione, seguita dalle colonne Categoria e Documenti e da due righe di dati. caption spiega lo scopo della tabella, mentre gli elementi th con scope identificano le intestazioni di colonne e righe.
Cambia il CSS caption-side: top in caption-side: bottom e ricarica la pagina. Il titolo si sposta sotto la tabella pur rimanendo il suo primo elemento figlio in HTML. Cambialo di nuovo in top per ripristinare la posizione originale. Usa text-align per l'allineamento orizzontale anziché l'attributo obsoleto align.
Scrivi didascalie della tabella utili
Un caption è un titolo visibile e aiuta a fornire un nome accessibile per la tabella. Il comportamento effettivo del lettore di schermo dipende dal browser, dalla tecnologia assistiva e da altri attributi di accessibilità. Aggiungere solo una didascalia non risolve tutti i problemi di accessibilità in una tabella complessa: controlla anche le relazioni tra intestazioni e celle di dati e l'ordine di lettura.
Il colore di sfondo di un elemento table non si applica automaticamente all’elemento caption; imposta lo sfondo separatamente se necessario. Se una tabella è l’unico contenuto di un elemento figure, usa figcaption per descrivere figure invece di ripetere lo stesso titolo in caption e figcaption. Il riferimento MDN per caption contiene regole ed esempi.
