Login | Iscriviti | FAQ
Anonymous

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.



<< Lezione 10: Tabelle

Lezione 12: Layout (CSS) >>