Il tag <TABLE> in Html
In questa lezione ti spiego come creare una tabella con il tag <table> del linguaggio HTML.
<table> </table>
Il tag <table> è un tag usato per creare le tabelle all'interno di una pagina web.
Tra il tag di apertura <table> e di chiusura </table> devi inserire i tag che definiscono le righe ( tag <tr> ) della tabella.
<table>
<tr>1a riga</tr>
<tr>2a riga</tr>
</table>
All'interno di ogni tag <tr> puoi inserire i tag che definiscono le colonne ( tag <td> ) della tabella.
<table>
<tr><td>1a riga e 1a colonna </td></tr>
<tr><td>2a riga e 1a colonna </td></tr>
</table>
Infine, all'interno dei tag <td> puoi inserire i dati della tabella.
Esempio. Ecco un esempio pratico di tabella realizzata con il linguaggio HTML
| Giorno | Mese | Anno |
|---|---|---|
| 27 | Aprile | 2019 |
| 11 | Maggio | 2020 |
| 7 | Agosto | 2021 |
Puoi usare il tag <table> solo all'interno della sezione <body> del documento HTML.
- <!DOCTYPE html>
- <html>
- <head>
- ...
- </head>
- <body>
- <table>
- <tr> <td> 1 </td> <td> 2 </td> <td> 3 </td> </tr>
- <tr> <td> 4 </td> <td> 5 </td> <td> 6 </td> </tr>
- <tr> <td> 7 </td> <td> 8 </td> <td> 9 </td> </tr>
- </table>
- </body>
- </html>
Per creare una tabella in HTML devi usare diversi tag combinati insieme.
Il tag <table> indica l'inizio della tabella, mentre il tag </table> ne indica la fine.
<table> </table>
Tra i due tag puoi inserire le righe e le colonne della tabella utilizzando il tag <tr> per le righe e il tag <td> per le colonne
Ti faccio un esempio pratico.
<table>
<tr> <td>Nome </td> <td>Cognome </td> </tr>
<tr> <td>Paolo </td> <td>Rossi </td></tr>
<tr> <td>Giuseppe </td> <td>Verdi </td></tr>
<tr> <td>Maria </td> <td>Bianchi </td></tr>
</table>
Il risultato è una tabella composta da due colonne e tre righe.
| Nome | Cognome |
| Paolo | Rossi |
| Giuseppe | Verdi |
| Maria | Bianchi |
In questo modo, hai disposto i dati in una tabella ordinata e facilmente leggibile.
A cosa servono le tabelle? Una tabella rappresenta i dati in una struttura pulita, organizzata e ordinata, rendendoli molto più facili da leggere per gli utenti.
Ti faccio un altro esempio.
Utilizza il tag <th> invece del tag <td> per l'intestazione della colonna.
<table>
<tr> <th>Nome </th> <th>Cognome </th> </tr>
<tr> <td>Paolo </td> <td>Rossi </td></tr>
<tr> <td>Giuseppe </td> <td>Verdi </td></tr>
<tr> <td>Maria </td> <td>Bianchi </td></tr>
</table>
Questo tag evidenzia l'intestazione della colonna rispetto ai dati effettivi della tabella.
| Nome | Cognome |
|---|---|
| Paolo | Rossi |
| Giuseppe | Verdi |
| Maria | Bianchi |
In questo modo, la tabella risulta più chiara e facilmente leggibile.
I tag utilizzabili nella tabella
Altri tag utili che puoi utilizzare con il tag <table> sono i seguenti
- Il tag <thead>
Utilizza il tag <thead> per l'intestazione della tabella. - Il tag <tbody>
Utilizza il tag <tbody> per il corpo della tabella dove inserisci i dati effettivi della tabella. - Il tag <tfoot>
Utilizza il tag <tfoot> per il piè di pagina della tabella dove puoi inserire eventuali note o informazioni aggiuntive sulla tabella. - Il tag <tr>
Definisce una riga della tabella. - Il tag <td>
Definisce una singola cella della tabella. - Il tag <th>
Utilizza il tag <th> per l'intestazione della colonna. - Il tag <colspan>
Utilizza il tag <colspan> per unire le celle in orizzontale. - Il tag <rowspan>
Utilizza il tag <rowspan> per unire le celle in verticale. - Il tag <colgroup>
Raggruppa le colonne di una tabella - Il tag <col>
Specifica le caratteristica di una singola colonna.
Per personalizzare la tabella ti consiglio di utilizzare un foglio di stile CSS.
Nota. In passato, prima della diffusione del CSS, per personalizzare la tabella si utilizzavano diversi attributi del tag <table> ora obsoleti anche se ancora funzionanti. Ecco un elenco degli attributi del tag <table>
- width
ti permette di impostare la larghezza della tabella in pixel o in percentuale. - summary
descrive il contenuto della tabella nei browser speciali degli utenti con disabilità visive - align
allinea la tabella a destra (right), a sinistra (left) o al centro (center) - frame
applica un bordo intorno alla tabella e alle celle - border
specifica lo spessore del bordo delle celle - rules
crea dei bordi intorno a gruppi di celle - bgcolor
definisce il colore dello sfondo di una tabella o di una cella - cellspacing
definisce la distanza tra le celle - cellpadding
definisce la distanza tra il margine di una cella e il suo contenuto
In questa lezione ti ho fornito un'ampia panoramica introduttiva sul tag <table> e come puoi usarlo in un documento HTML.
Utilizzando i giusti tag puoi creare una tabella ben strutturata e facilmente leggibile per gli utenti.
