Nella nostra guida sul linguaggio HTML, abbiamo visto come creare una pagina, scrivere, aggiungere delle liste, foto, video e link. Adesso vedremo un altro elemento che può essere utile: le tabelle. Come si inseriscono in un file HTML?
Prima vedremo come si aggiunge e si crea una tabella solo sul codice HTML. Poi vedremo come possiamo farlo in modo più pulito.
Creiamo una tabella
Come sappiamo, una tabella è formatta da righe, colonne e celle. Quando lavoriamo con il codice HTML, dobbiamo aggiungere e impostare tutto manualmente. Tutti i codici devono trovarsi all’interno dell’elemento table. Puoi trovare i risultati degli esempi sotto riportati a questo file che ho creato su SoloLearn.
<table border="2"><b>Esempio di tabella:</b> <tr> <!-- Indica una riga--> <td>Prima cella</td> <td>Seconda cella</td> <td>Terza cella</td> </tr> <tr> <td>Prima cella</td> <td>Seconda cella</td> <td>Terza cella</td> </tr> </table>
- Come stiamo vedendo, il tag tr ci permette di creare una singola riga, il tag td ci fa creare tutte le celle che vogliamo all’interno di quelle riga.
- Accanto a table ho indicato un bordo. Se non scrivo nulla, la tabella non avrà bordi.
- Sopra la prima riga ho indicato al browser il nome della tabella: è facoltativo.
Vediamo il secondo esempio:
<table border="2"><b>Secondo esempio:</b> <tr> <td colspan="2">Prima cella</td> <td>Seconda cella</td> </tr> <tr> <td rowspan="2">Prima cella</td> <td>Seconda cella</td> <td>Terza cella</td> </tr> <tr> <td>Seconda cella</td> <td>Terza cella</td> </tr> </table>
Abbiamo inserito in questo caso due attributi:
- Colspan: Unisce due celle
- Rowspan: Unisce due righe
Vediamo il terzo esempio:
<table border="1"><b>Terzo esempio:</b> <tr> <td headers="Prova" >Titolo tabella</td> </tr> <tr> <td colspan="2">Prima cella</td> <td bgcolor="blue" align="center"><p style="color: honeydew; height: 10px;">Seconda cella</p></td> </tr> <tr> <td rowspan="2" width="150">Prima cella</td> <td width="200" >Seconda cella</td> <td width="150">Terza cella</td> </tr> <tr> <td bgcolor="yellow" align="center">Seconda cella</td> <td>Terza cella</td> </tr> </table>
In questo caso abbiamo aggiunto diverse personalizzazioni:
- Nella prima riga ho inserito un’intestazione alla tabella con l’attributo header. In questo caso non sarebbe più necessario inserire il titolo alla tabella.
- Nella seconda cella della seconda riga ho inserito il blu come colore di sfondo e l’allineamento al centro della sua cella. Per modificare il testo ho dovuto inserirlo all’interno dell’elemento paragrafo e aggiungere delle proprietà all’interno dell’attributo style.
- Ho modificato la lunghezza delle celle della terza riga con l’attributo width. Questo, comunque, influenzerà tutte le altre celle sopra e sotto.
Vediamo l’ultimo esempio:
<table border="1" width="500" align="center">Ultimo esempio: <tr align="center"> <td rowspan="2">Prova 1 </td> <td>Prova 2</td> <td>Prova 3</td> </tr> <tr align="center"> <td colspan="2">Prova 5</td> </tr> </table>
Stavolta, ho impostato gli attributi all’intera tabella. Ho impostato la sua lunghezza massima e l’ho allineata al centro della nostra pagina.
Creare una tabella aggiungendo le regole CSS a parte
In realtà, il modo più pulito di creare una tabella è inserire il relativo codice HTML e poi impostare le regole di stile a parte. Per di più possiamo creare una riga principale (thead) e una riga finale (tfoot, per esempio dove sommeremo i dati delle altre righe).
Questo è un esempio di tabella dove inseriamo le materie di scuola. Puoi vederlo anche su SoloLearn o su W3Schools.com.
<table> <thead> <tr> <th>Orari</th> <th>Lunedi</th> <th>Martedi</th> <th>Mercoledi</th> <th>Giovedi</th> <th>Venerdi</th> <th>Sabato</th> </tr> </thead> <tbody> <tr> <td>8:00-9:00</td> <td>Storia</td> <td>Italiano</td> <td>Matematica</td> <td>Fisica</td> <td>Biologia</td> <td>Inglese</td> </tr> <tr> <td>9:00-10:00</td> <td>Italiano</td> <td>Italiano</td> <td>Inglese</td> <td>Biologia</td> <td>Inglese</td> <td>Geografia</td> </tr> <tr> <td>10:00-11:00</td> <td>Italiano</td> <td>Fisica</td> <td>Inglese</td> <td>Storia</td> <td>Chimica</td> <td>Storia</td> </tr> </tbody> <tfoot> <tr> <td>Assenza</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </tfoot> </table>
Aggiungiamo le regole CSS per le tabelle in un file a parte o all’interno dell’elemento <style> nella sezione <head>, dopo il titolo (Per maggiori informazioni sui CSS vedi la guida linkata sopra).
/*Tabelle*/
table {
border-collapse: collapse; /*Facciamo in modo che le singole celle non hanno i bordi separati*/
text-align: center;
width: 500px;
margin: auto; /*Centra la tabella nella pagina*/
}
td, th {
border: 1px solid #1e9c6c;
font-size: 18px;
}
Ecco come apparirà la nostra tabella
Ovviamente, se vogliamo che una determinata cella occupi più righe (rowspan) o più colonne (colspan) dobbiamo indicarlo nel codice HTML.