Come creare tabelle HTML

Per integrare le tabelle in qualsiasi punto delle pagine web e strut­tu­ra­re le in­for­ma­zio­ni chia­ra­men­te, puoi uti­liz­za­re il tag <table> in HTML. Spe­ci­fi­can­do le celle di in­te­sta­zio­ne, le righe e le celle di dati, è possibile de­ter­mi­na­re in­di­vi­dual­men­te la loro struttura.

Cos’è una tabella HTML e a cosa serve?

Una tabella HTML è un elemento HTML strut­tu­ra­to uti­liz­za­to per vi­sua­liz­za­re dati e testo in formato tabellare. Per definire e strut­tu­ra­re una tabella sono necessari diversi tag HTML. L’aspetto grafico delle tabelle, ovvero lo stile delle tabelle HTML, viene rea­liz­za­to se­pa­ra­ta­men­te uti­liz­zan­do le istru­zio­ni CSS cor­ri­spon­den­ti.

Le tabelle HTML offrono tutte le pos­si­bi­li­tà delle tabelle classiche: or­ga­niz­za­no le in­for­ma­zio­ni da vi­sua­liz­za­re in righe (oriz­zon­tal­men­te) e colonne (ver­ti­cal­men­te). Per questo motivo, le tabelle nei documenti HTML sono da con­si­de­rar­si come al­ter­na­ti­ve agli elenchi, so­prat­tut­to per la pre­sen­ta­zio­ne dei seguenti contenuti:

• Ca­len­da­rio
• Dettagli dei contatti
• Clas­si­fi­che
• Orari dei mezzi
• Listini prezzi
• Confronti tra prodotti
• Sta­ti­sti­che

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 pre­sen­tia­mo i prin­ci­pa­li tag qui di seguito:

• <table>: il tag HTML <table> è l’elemento più im­por­tan­te per creare una tabella. Con un <table> in­tro­dut­ti­vo viene indicato l’inizio della tabella HTML, mentre un </table> con­clu­si­vo 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 in­tro­du­zio­ne 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 au­to­ma­ti­ca­men­te una cella di tabella e quindi una colonna. Le in­for­ma­zio­ni richieste vengono inserite tra l’elemento in­tro­dut­ti­vo <td> e la chiusura </td>.
• <th>: il già citato tag <th> è fon­da­men­tal­men­te una forma speciale del tag della cella di tabella <td>. Viene ti­pi­ca­men­te usato per mettere in evidenza le celle di in­te­sta­zio­ne (“Table Heading”), ma può anche essere usato per evi­den­zia­re la voce iniziale di una riga.

Esempio di una semplice tabella HTML

Per il­lu­stra­re le pos­si­bi­li­tà dei tag per una tabella, ri­por­tia­mo di seguito un semplice esempio di tabella HTML. A titolo di esempio vengono pre­sen­ta­ti de­scri­zio­ni e prezzi di tre piatti. Nella riga di in­te­sta­zio­ne, definiamo i tre titoli delle colonne “Piatto”, “De­scri­zio­ne” e “Prezzo”. Seguono altre tre righe in cui vengono fornite le in­for­ma­zio­ni. 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 ap­pro­pria­te

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 prin­ci­pa­li problemi che possono so­prag­giun­ge­re:

• Leg­gi­bi­li­tà: le tabelle sono difficili da leggere per gli utenti e gli screen reader, se non si definisce una struttura chiara. Quindi ometti le in­te­sta­zio­ni solo se sono as­so­lu­ta­men­te ir­ri­le­van­ti per le in­for­ma­zio­ni fornite.
• Vi­sua­liz­za­zio­ne sui di­spo­si­ti­vi mobili: le normali tabelle HTML vengono spesso vi­sua­liz­za­te male su smart­pho­ne e tablet. Per garantire che le tabelle integrate possano essere vi­sua­liz­za­te anche sui di­spo­si­ti­vi mobili, è quindi ne­ces­sa­rio creare istru­zio­ni CSS ap­pro­pria­te per un re­spon­si­ve design.
• Tabelle come elemento di layout: in passato, le tabelle HTML venivano spesso uti­liz­za­te per la pro­get­ta­zio­ne grafica dei siti web. Al giorno d’oggi, è bene astenersi da questo approccio e regolare il layout esclu­si­va­men­te tramite i fogli CSS.
• Unità mancanti o in­coe­ren­ti: se includi una tabella con valori numerici, può fa­cil­men­te accadere che per le singole voci vengano uti­liz­za­te unità di misura errate o di­ret­ta­men­te non in uso. As­si­cu­ra­ti di mantenere una certa coerenza in questo caso per evitare di fare con­fu­sio­ne.

Un altro problema nella creazione di tabelle HTML riguarda la vi­sua­liz­za­zio­ne di caratteri speciali. Poiché hanno un si­gni­fi­ca­to speciale in HTML, i caratteri <, >, &, " e ’, ad esempio, molto spesso causano una vi­sua­liz­za­zio­ne errata delle tabelle. La soluzione in questo caso consiste nell’uti­liz­za­re le cor­ri­spon­den­ti entità HTML. Se uno dei caratteri elencati è presente nella tabella prevista, so­sti­tui­sci­lo con la stringa di caratteri ap­pro­pria­ta. La nostra pa­no­ra­mi­ca ti mostra di quali si tratta: