Lezione11: 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.

Postato sotto: Lezioni HTML