Come creare tabelle HTML

Per integrare le tabelle in qualsiasi punto delle pagine web e strutturare le informazioni chiaramente, puoi utilizzare il tag <table> in HTML. Specificando le celle di intestazione, le righe e le celle di dati, è possibile determinare individualmente la loro struttura.

Cos’è una tabella HTML e a cosa serve?

Una tabella HTML è un elemento HTML strutturato utilizzato per visualizzare dati e testo in formato tabellare. Per definire e strutturare una tabella sono necessari diversi tag HTML. L’aspetto grafico delle tabelle, ovvero lo stile delle tabelle HTML, viene realizzato separatamente utilizzando le istruzioni CSS corrispondenti.

Le tabelle HTML offrono tutte le possibilità delle tabelle classiche: organizzano le informazioni da visualizzare in righe (orizzontalmente) e colonne (verticalmente). Per questo motivo, le tabelle nei documenti HTML sono da considerarsi come alternative agli elenchi, soprattutto per la presentazione dei seguenti contenuti:

• Calendario
• Dettagli dei contatti
• Classifiche
• Orari dei mezzi
• Listini prezzi
• Confronti tra prodotti
• Statistiche

Quali tag sono necessari per una tabella HTML?

Per creare una tabella HTML, sono sempre necessari almeno tre tag diversi. Il tag <th> per i titoli della tabella HTML (table headings) è un tag opzionale. Ti presentiamo i principali tag qui di seguito:

• <table>: il tag HTML <table> è l’elemento più importante per creare una tabella. Con un <table> introduttivo viene indicato l’inizio della tabella HTML, mentre un </table> conclusivo ne segnala la fine.
• <tr>: per creare una nuova riga si usa il tag <tr>, che sta per “Table Row”, quindi riga della tabella in italiano. Per ogni riga sono necessari un tag di introduzione e uno di chiusura.
• <td>: il tag <td> sta per “Table Data”, cioè per i dati effettivi della tabella. Per ogni elemento <td> inserito viene generata automaticamente una cella di tabella e quindi una colonna. Le informazioni richieste vengono inserite tra l’elemento introduttivo <td> e la chiusura </td>.
• <th>: il già citato tag <th> è fondamentalmente una forma speciale del tag della cella di tabella <td>. Viene tipicamente usato per mettere in evidenza le celle di intestazione (“Table Heading”), ma può anche essere usato per evidenziare la voce iniziale di una riga.

Esempio di una semplice tabella HTML

Per illustrare le possibilità dei tag per una tabella, riportiamo di seguito un semplice esempio di tabella HTML. A titolo di esempio vengono presentati descrizioni e prezzi di tre piatti. Nella riga di intestazione, definiamo i tre titoli delle colonne “Piatto”, “Descrizione” e “Prezzo”. Seguono altre tre righe in cui vengono fornite le informazioni. La tabella HTML ha quindi un totale di quattro righe e tre colonne:

<table>
	<tr>
		<th>Piatto</th>
		<th>Descrizione</th>
		<th>Prezzo</th>
	</tr>
	<tr>
		<td>Spaghetti alla carbonara</td>
		<td>Pasta con uova e pancetta</td>
		<td>9,50 €</td>
	</tr>
	<tr>
		<td>Pizza margherita</td>
		<td>Pizza con sugo di pomodoro, mozzarella e basilico fresco</td>
		<td>9,00 €</td>
	</tr>
	<tr>
		<td>Caesar salad</td>
		<td>Insalata, petto di pollo, crostini, salse</td>
		<td>8,50 €</td>
	</tr>
</table>

Sul sito web in questione, la tabella ha un aspetto simile a questo:

Close

Tabelle HTML: problemi tipici e soluzioni appropriate

Quando si creano tabelle HTML, ci sono alcuni problemi tipici che si ripetono, ma che possono essere in gran parte evitati lavorando in modo pulito e attento. Abbiamo riassunto per te i principali problemi che possono sopraggiungere:

• Leggibilità: le tabelle sono difficili da leggere per gli utenti e gli screen reader, se non si definisce una struttura chiara. Quindi ometti le intestazioni solo se sono assolutamente irrilevanti per le informazioni fornite.
• Visualizzazione sui dispositivi mobili: le normali tabelle HTML vengono spesso visualizzate male su smartphone e tablet. Per garantire che le tabelle integrate possano essere visualizzate anche sui dispositivi mobili, è quindi necessario creare istruzioni CSS appropriate per un responsive design.
• Tabelle come elemento di layout: in passato, le tabelle HTML venivano spesso utilizzate per la progettazione grafica dei siti web. Al giorno d’oggi, è bene astenersi da questo approccio e regolare il layout esclusivamente tramite i fogli CSS.
• Unità mancanti o incoerenti: se includi una tabella con valori numerici, può facilmente accadere che per le singole voci vengano utilizzate unità di misura errate o direttamente non in uso. Assicurati di mantenere una certa coerenza in questo caso per evitare di fare confusione.

Un altro problema nella creazione di tabelle HTML riguarda la visualizzazione di caratteri speciali. Poiché hanno un significato speciale in HTML, i caratteri <, >, &, " e ’, ad esempio, molto spesso causano una visualizzazione errata delle tabelle. La soluzione in questo caso consiste nell’utilizzare le corrispondenti entità HTML. Se uno dei caratteri elencati è presente nella tabella prevista, sostituiscilo con la stringa di caratteri appropriata. La nostra panoramica ti mostra di quali si tratta: