Lezione 11: Ancora sulle tabelle
Il titolo "Ancora sulle tabelle " potrebbe suonare un pochino noioso. Ma guarda il lato positivo. Quando sei diventato padrone delle tabelle, non c'è assolutamente niente dell'HTML che ti sfinirà.
Allora cosa manca?
I due attributi colspan e rowspan vengono usati quando vuoi creare delle tabelle elaborate.
Colspan è l'abbreviazione delle parole inglesi "column span" (cioè, colonne accoppiate). Colspan viene usato nel tag <td> per specificare quante colonne dovranno essere unite insieme:
Esempio 1:
<table border="1">
<tr>
<td colspan="3">Cella 1</td>
</tr>
<tr>
<td>Cella 2</td>
<td>Cella 3</td>
<td>Cella 4</td>
</tr>
</table>
Sul browser si vedrà così:
| Cella 1 | ||
| Cella 2 | Cella 3 | Cella 4 |
FIssando colspan a "3", la cella nella prima riga occupa tre colonne. Se invece avessimo fissato colspan a "2", la cella sarebbe stata formata solo da due colonne e sarebbe stato necessario inserire una cella aggiuntiva nella prima riga in modo da fare combaciare le due righe.
Esempio 2:
<table border="1">
<tr>
<td colspan="2">Cella 1</td>
<td>Cella 2</td>
</tr>
<tr>
<td>Cella 3</td>
<td>Cella 4</td>
<td>Cella 5</td>
</tr>
</table>
Sul broswser si vedrà così:
| Cella 1 | Cella 2 | |
| Cella 3 | Cella 4 | Cella 5 |
E cosa mi dici di rowspan?
Come potrai già immaginare, rowspan specifica quante righe dovrebbero essere comprese in una cella:
Esempio 3:
<table border="1">
<tr>
<td rowspan="3">Cella 1</td>
<td>Cella 2</td>
</tr>
<tr>
<td>Cella 3</td>
</tr>
<tr>
<td>Cella 4</td>
</tr>
</table>
Sul browser si vedrà così:
| Cella 1 | Cella 2 |
| Cella 3 | |
| Cella 4 |
Nell'esempio sopra rowspan è fissato a "3" nella Cella 1. Questo significa che la cella sarà formata da 3 righe (la sua stessa riga più altre due). Così la Cella 1 e la Cella 2 stanno sulla stessa riga, mentr la Cella 3 e la Cella 4 formano due righe indipendenti.
Confuso? Bene, non è semplice ed è facile perdersi. Quindi, sarebbe una buona idea disegnare la tabella su un pezzo di carta prima di iniziare con l'HTML.
Non sei confuso? Allora vai avanti e crea da solo un paio di tabelle con colspan e rowspan insieme.