In questa lezione come utilizzare le tabelle HTML
Le tabelle HTML sono utilizzate principalmente per organizzare e visualizzare dati in una struttura tabulare, come ad esempio per creare una griglia di dati, una lista di prodotti, una lista di contatti, una lista di orari, una lista di tariffe e così via. Le tabelle HTML possono essere utilizzate in molti contesti, tra cui:
- Siti web di e-commerce: possono essere utilizzate per visualizzare i prodotti in modo ordinato, mostrando le informazioni relative a ciascun prodotto in colonne separate, come il prezzo, la descrizione, la disponibilità e così via.
- Siti web di prenotazione: possono essere utilizzate per visualizzare i prezzi e la disponibilità delle camere in un hotel o dei posti sui voli.
- Siti web di comparazione: possono essere utilizzate per confrontare le caratteristiche di prodotti o servizi simili, mostrando le informazioni in colonne separate.
- Siti web di calendario: possono essere utilizzate per visualizzare gli orari e le date degli eventi in modo ordinato.
- Siti web di valutazione: possono essere utilizzate per visualizzare le recensioni e le valutazioni degli utenti in modo ordinato, mostrando le informazioni in colonne separate.
Le tabelle HTML offrono molte opzioni di personalizzazione, come l’aggiunta di colori, immagini, icone e formattazione del testo, che possono rendere la visualizzazione dei dati più attraente e facile da leggere. Inoltre, le tabelle HTML possono essere utilizzate insieme ad altri elementi HTML come i formulari, i bottoni e i link per creare interfacce utente interattive e dinamiche.
Struttura base di una tabella HTML
<table>
<tr>
<td>Riga 1</td>
<td>Dato 1</td>
<td>Dato 2</td>
<td>Dato 3</td>
</tr>
<tr>
<td>Riga 2</td>
<td>Dato 1</td>
<td>Dato 2</td>
<td>Dato 3</td>
</tr>
</table>
Il TAG tr (table row) crea una nuova riga della tabella, il TAG td (table data) crea un nuovo dato nella riga dove viene scritto.
Intestazioni nelle tabelle HTML
<table border="solid">
<tr>
<th></th>
<th>09:00</th>
<th>10:00</th>
<th>11:00</th>
<th>12:00</th>
</tr>
<tr>
<th>Lunedì</th>
<td colspan="2">Sistemi e Reti</td>
<td>Informatica</td>
<td>TPSI</td>
</tr>
</table>
il tag th (table header) rappresenta l’intestazione e può essere utilizzato sia per le righe che per le colonne. Quando vogliamo che una cella occupi n posizioni utilizzeremo l’attributo colspan con n come valore, n rappresenta quante celle verrano utilizzate, di seguito l’output
in modo analogo possiamo fare in modo che un table data occupi più righe
<table border="solid">
<tr>
<th>16:00 - 17:00</th>
<td rowspan="2">Palestra</td>
</tr>
<tr>
<th>17:00 - 18:00</th>
</tr>
</table>
Best practices per le tabelle HTML
È una buona pratica utilizzare i seguenti elementi (thead tbody tfoot) per migliorare la leggibilità di una table a livello del codice, inoltre questo accorgimento ci permetterà di utilizzare i CSS in modo più preciso e flessibile.
Questa pratica aiuta anche le persone che utilizzano uno screen reader.
<table border="solid">
<thead>
<tr>
<th>Header della tabella</th>
</tr>
</thead>
<tbody>
<tr>
<td>Contenuto della tabella</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Footer della tabella</td>
</tr>
</tfoot>
</table>
