Creare una tabella in una pagina HTML

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

Esempio tabella html già modificata con le regole CSS.
Esempio tabella html già modificata con le regole CSS.

Ovviamente, se vogliamo che una determinata cella occupi più righe (rowspan) o più colonne (colspan) dobbiamo indicarlo nel codice HTML.