Sviluppo Web

Unire Le Celle

Stampa WhatsApp Email

Terza lezione sulle tabelle HTML: comprendere come unire le celle utilizzando gli attributi colspan e rowspan attraverso esempi completi e un laboratorio sull’orario scolastico.

Unire le celle di una tabella

Nelle lezioni precedenti abbiamo costruito tabelle nelle quali ogni cella occupava lo spazio di una riga e una colonna.

Nelle lezioni precedenti abbiamo costruito tabelle nelle quali ogni cella occupava lo spazio di una riga e una colonna.

Osserviamo questa tabella completa: 

<table>

    <caption>Orario scolastico</caption>

    <thead>

        <tr>
            <th>Ora</th>
            <th>Lunedì</th>
            <th>Martedì</th>
            <th>Mercoledì</th>
        </tr>

    </thead>

    <tbody>

        <tr>
            <td>8:00</td>
            <td>Italiano</td>
            <td>Matematica</td>
            <td>Informatica</td>
        </tr>

        <tr>
            <td>9:00</td>
            <td>Inglese</td>
            <td>Storia</td>
            <td>Matematica</td>
        </tr>

    </tbody>

</table>

La tabella possiede 4 colonne:

  1. Ora;
  2. Lunedì;
  3. Martedì;
  4. Mercoledì.

Ogni cella occupa normalmente una sola posizione della tabella.

Ma se volessimo una cella più grande?

HTML permette a una cella di occupare lo spazio di più colonne oppure di più righe.

Per farlo utilizziamo due attributi: colspan e rowspan.

colspan: una cella su più colonne

Supponiamo di voler inserire nell’orario una riga dedicata all’INTERVALLO.

Supponiamo di voler inserire nell’orario una riga dedicata all’INTERVALLO.

Vogliamo che la parola INTERVALLO occupi tutta la larghezza della tabella e non una sola cella.

Prima: una cella normale

Se aggiungiamo una normale cella td: 

<table>

    <caption>Orario scolastico</caption>

    <thead>

        <tr>
            <th>Ora</th>
            <th>Lunedì</th>
            <th>Martedì</th>
            <th>Mercoledì</th>
        </tr>

    </thead>

    <tbody>

        <tr>
            <td>8:00</td>
            <td>Italiano</td>
            <td>Matematica</td>
            <td>Informatica</td>
        </tr>

        <tr>
            <td>INTERVALLO</td>
        </tr>

        <tr>
            <td>9:00</td>
            <td>Inglese</td>
            <td>Storia</td>
            <td>Matematica</td>
        </tr>

    </tbody>

</table>

La cella INTERVALLO occupa soltanto la prima colonna. 

+------------+-------------+-------------+-------------+
| Ora        | Lunedì      | Martedì     | Mercoledì   |
+------------+-------------+-------------+-------------+
| 8:00       | Italiano    | Matematica  | Informatica |
+------------+-------------+-------------+-------------+
| INTERVALLO |             |             |             |
+------------+-------------+-------------+-------------+
| 9:00       | Inglese     | Storia      | Matematica  |
+------------+-------------+-------------+-------------+

Noi vogliamo invece ottenere: 

+--------------------------------------------------------+
| Ora        | Lunedì      | Martedì     | Mercoledì   |
+------------+-------------+-------------+-------------+
| 8:00       | Italiano    | Matematica  | Informatica |
+--------------------------------------------------------+
|                     INTERVALLO                         |
+--------------------------------------------------------+
| 9:00       | Inglese     | Storia      | Matematica  |
+------------+-------------+-------------+-------------+

Dopo: utilizziamo colspan

La tabella possiede 4 colonne.

Dobbiamo quindi indicare che la cella INTERVALLO deve occupare lo spazio di 4 colonne. 

<table>

    <caption>Orario scolastico</caption>

    <thead>

        <tr>
            <th>Ora</th>
            <th>Lunedì</th>
            <th>Martedì</th>
            <th>Mercoledì</th>
        </tr>

    </thead>

    <tbody>

        <tr>
            <td>8:00</td>
            <td>Italiano</td>
            <td>Matematica</td>
            <td>Informatica</td>
        </tr>

        <tr>
            <td colspan="4">INTERVALLO</td>
        </tr>

        <tr>
            <td>9:00</td>
            <td>Inglese</td>
            <td>Storia</td>
            <td>Matematica</td>
        </tr>

    </tbody>

</table>
Che cosa è cambiato?

Abbiamo modificato soltanto questa cella: 

<td colspan="4">INTERVALLO</td>

colspan="4" significa: questa cella deve occupare lo spazio di quattro colonne.

La cella non deve necessariamente occupare tutta la tabella

colspan può essere utilizzato anche per unire soltanto alcune colonne.

Consideriamo questa tabella: 

<table>

    <thead>

        <tr>
            <th>Ora</th>
            <th>Lunedì</th>
            <th>Martedì</th>
            <th>Mercoledì</th>
        </tr>

    </thead>

    <tbody>

        <tr>
            <td>10:00</td>
            <td colspan="2">Laboratorio di Informatica</td>
            <td>Italiano</td>
        </tr>

    </tbody>

</table>

La riga continua a occupare complessivamente 4 colonne:

  • 10:00 occupa 1 colonna;
  • Laboratorio di Informatica occupa 2 colonne;
  • Italiano occupa 1 colonna.

Quindi: 

1 + 2 + 1 = 4 colonne
Regola importante

Una cella con colspan="2" conta come due colonne, anche se nel codice vediamo un solo elemento td.

rowspan: una cella su più righe

Vediamo ora una situazione diversa.

Vediamo ora una situazione diversa.

Supponiamo che il lunedì ci siano due ore consecutive di Informatica.

Prima: due celle separate

Senza utilizzare rowspan la tabella sarà: 

<table>

    <caption>Orario scolastico</caption>

    <thead>

        <tr>
            <th>Ora</th>
            <th>Lunedì</th>
            <th>Martedì</th>
            <th>Mercoledì</th>
        </tr>

    </thead>

    <tbody>

        <tr>
            <td>8:00</td>
            <td>Informatica</td>
            <td>Matematica</td>
            <td>Italiano</td>
        </tr>

        <tr>
            <td>9:00</td>
            <td>Informatica</td>
            <td>Storia</td>
            <td>Inglese</td>
        </tr>

    </tbody>

</table>

Il risultato è: 

+-------+---------------+-------------+-----------+
| Ora   | Lunedì        | Martedì     | Mercoledì |
+-------+---------------+-------------+-----------+
| 8:00  | Informatica   | Matematica  | Italiano  |
+-------+---------------+-------------+-----------+
| 9:00  | Informatica   | Storia      | Inglese   |
+-------+---------------+-------------+-----------+

Abbiamo due celle diverse che contengono entrambe la parola Informatica.

Vogliamo invece ottenere una sola grande cella: 

+-------+---------------+-------------+-----------+
| Ora   | Lunedì        | Martedì     | Mercoledì |
+-------+               +-------------+-----------+
| 8:00  |               | Matematica  | Italiano  |
+-------+  Informatica  +-------------+-----------+
| 9:00  |               | Storia      | Inglese   |
+-------+---------------+-------------+-----------+

Dopo: utilizziamo rowspan

Modifichiamo la tabella completa: 

<table>

    <caption>Orario scolastico</caption>

    <thead>

        <tr>
            <th>Ora</th>
            <th>Lunedì</th>
            <th>Martedì</th>
            <th>Mercoledì</th>
        </tr>

    </thead>

    <tbody>

        <tr>

            <td>8:00</td>

            <td rowspan="2">Informatica</td>

            <td>Matematica</td>
            <td>Italiano</td>

        </tr>


        <tr>

            <td>9:00</td>

            <td>Storia</td>
            <td>Inglese</td>

        </tr>

    </tbody>

</table>
Che cosa è cambiato?

Nella riga delle 8:00 abbiamo scritto: 

<td rowspan="2">Informatica</td>

Significa che la cella Informatica occupa due righe: quella delle 8:00 e quella delle 9:00.

Perché nella seconda riga manca una cella?

Osserviamo soltanto le due righe: 

<tr>

    <td>8:00</td>
    <td rowspan="2">Informatica</td>
    <td>Matematica</td>
    <td>Italiano</td>

</tr>


<tr>

    <td>9:00</td>
    <td>Storia</td>
    <td>Inglese</td>

</tr>

La seconda riga contiene soltanto tre nuovi elementi td.

La quarta posizione non manca: è già occupata dalla cella Informatica che arriva dalla riga precedente. 

                 COLONNE

             1          2            3          4

8:00       8:00     Informatica   Matematica   Italiano
                     |
                     |
9:00       9:00     |             Storia       Inglese
                     |
                     +--- stessa cella
Errore da evitare

Se una cella utilizza rowspan="2", nella riga successiva non dobbiamo aggiungere un’altra cella nella posizione già occupata.

colspan e rowspan a confronto

Attributo Direzione Significato Esempio
colspan Orizzontale → Una cella occupa più colonne colspan="4"
rowspan Verticale ↓ Una cella occupa più righe rowspan="2"
Metodo per non confondersi

Chiediti sempre:

La cella deve diventare più larga? → colspan

La cella deve diventare più alta? → rowspan

Sono attributi della cella

colspan e rowspan non sono nuovi tag.

colspan e rowspan non sono nuovi tag.

Sono attributi che aggiungiamo al tag td o th. 

<td colspan="4">INTERVALLO</td>

oppure:

<td rowspan="2">Informatica</td>

Il numero indica quante colonne o quante righe deve occupare la cella.

LABORATORIO

Modifichiamo il nostro orario

Riprendiamo il file orario.html realizzato nelle lezioni precedenti.

Riprendiamo il file orario.html realizzato nelle lezioni precedenti.

In questa esercitazione utilizzeremo prima colspan e successivamente rowspan.

Passo 1 - Inserire una riga INTERVALLO

Il nostro orario contiene:

  • 1 colonna per l’ora;
  • 5 colonne per i giorni della settimana.

In totale abbiamo quindi 6 colonne.

All’interno di tbody, tra due ore dell’orario, aggiungi: 

<tr>

    <td colspan="6">INTERVALLO</td>

</tr>

Salva e osserva il risultato nel browser.

Controllo

La cella INTERVALLO occupa tutta la larghezza dell’orario?

Perché abbiamo utilizzato il valore 6?

Passo 2 - Sperimentare con colspan

Modifica temporaneamente: 

colspan="6"

in:

colspan="3"

Salva e osserva il risultato.

La cella occupa ancora tutta la tabella?

Ripristina poi colspan="6".

Passo 3 - Creare una lezione di due ore

Scegli un giorno nel quale vuoi inserire due ore consecutive della stessa materia.

Per esempio, supponiamo di avere Informatica il lunedì alle 8:00 e alle 9:00.

Prima avremo:

<tr>

    <td>8:00</td>
    <td>Informatica</td>
    <td>Matematica</td>
    <td>Italiano</td>
    <td>Storia</td>
    <td>Inglese</td>

</tr>


<tr>

    <td>9:00</td>
    <td>Informatica</td>
    <td>Italiano</td>
    <td>Matematica</td>
    <td>Inglese</td>
    <td>Storia</td>

</tr>

Modifica la prima cella Informatica: 

<td rowspan="2">Informatica</td>

e rimuovi la seconda cella Informatica.

Le due righe diventano:

<tr>

    <td>8:00</td>

    <td rowspan="2">Informatica</td>

    <td>Matematica</td>
    <td>Italiano</td>
    <td>Storia</td>
    <td>Inglese</td>

</tr>


<tr>

    <td>9:00</td>

    <td>Italiano</td>
    <td>Matematica</td>
    <td>Inglese</td>
    <td>Storia</td>

</tr>
Controlla bene

Nella seconda riga non dobbiamo inserire una cella per il lunedì.

Quella posizione è già occupata dalla cella Informatica con rowspan="2".

Esercizio autonomo

Completa il tuo orario scolastico e inserisci:

  1. una riga INTERVALLO che occupi tutte le colonne;
  2. almeno una materia che occupi due ore consecutive;
  3. almeno un utilizzo corretto di colspan;
  4. almeno un utilizzo corretto di rowspan.
Prima di terminare

Controlla che:

  • le colonne rimangano correttamente allineate;
  • INTERVALLO occupi tutta la tabella;
  • la materia di due ore compaia una sola volta;
  • non siano presenti celle duplicate dopo un rowspan;
  • il codice sia correttamente indentato.

Errori comuni

Errore 1 - Non contare le colonne

Prima di utilizzare colspan dobbiamo sapere quante colonne deve occupare la cella.

Se l’orario contiene 6 colonne e INTERVALLO deve occuparle tutte: 

<td colspan="6">INTERVALLO</td>

Errore 2 - Aggiungere altre celle dopo un colspan completo

Questa riga è già completa: 

<tr>

    <td colspan="6">INTERVALLO</td>

</tr>

La singola cella occupa infatti lo spazio di tutte e sei le colonne.

Errore 3 - Duplicare una cella dopo rowspan

Se una cella utilizza: 

<td rowspan="2">Informatica</td>

occupa anche la stessa posizione nella riga successiva. Non dobbiamo aggiungere un altro td in quella posizione.

Verifica rapida

Domande di controllo
  1. A cosa serve colspan?
  2. Che cosa significa colspan="4"?
  3. A cosa serve rowspan?
  4. Che cosa significa rowspan="2"?
  5. Se una tabella ha 6 colonne e una cella deve occuparle tutte, quale attributo scriviamo?
  6. Se una materia occupa tre ore consecutive, quale valore potremmo assegnare a rowspan?
  7. Perché dopo un rowspan="2" non dobbiamo ripetere la cella nella riga successiva?
  8. colspan e rowspan sono tag o attributi?