HTML - Le Tabelle

  »   HTML  »   HTML Tutorial - Tables, Creating and using them

Le tabelle possono sembrare difficili inizialmente, ma con un po' di pratica ti accorgerai che sono in realtà molto più semplici di quello che sembrano. Con l'etichetta <table> si introduce una tabella. Ci sono inoltre altre due etichette: <tr> per le linee e <td> per le colonne. La spiegazione migliore però rimane comunque un esempio.

html<table border="1">
	<tr>
		<td>Linea 1 Cella 1</td>
		<td>Linea 1 Cella 2</td>
	</tr>
	<tr>
		<td>Linea 2 Cella 1</td>
		<td>Linea 2 Cella 2</td>
	</tr>
</table>

Demo

Linea 1 Cella 1Linea 1 Cella 2
Linea 2 Cella 1Linea 2 Cella 2

Il contenuto verrà posizionato all'interno delle righe della tabella. Una linea è racchiusa tra le etichette <td> e </td>. L'attributo "border" stabilisce la dimensione del bordo.

HTML - Tabelle asimmetriche

Per formare tabelle asimmetriche useremo 'rowspan' per attraversare più di una linea e 'colspan' per attraversare più di una colonna. Per far si che la prima linea valga come titolo per tutte le colonne è possibile utilizzare l'etichetta <th>. In tal caso il titolo verrà visualizzato in grassetto come nell'esempio seguente:

html<table border="1"> 
	<tr>
		<th>Colonna 1</th> 
		<th>Colonna 2</th>
		<th>Colonna 3</th>
	</tr>
	<tr>
		<td rowspan="2">Row 1 Cell 1</td> 
		<td>Riga 1 Cella 2</td>
		<td>Riga 1 Cella 3</td>
	</tr>
	<tr>
		<td>Riga 2 Cella 2</td>
		<td>Riga 2 Cella 3</td>
	</tr> 
	<tr>
		<td colspan="3">Riga 3 Cella 1</td>
	</tr>
</table>

Demo

Colonna 1Colonna 2Colonna 3
Row 1 Cell 1Riga 1 Cella 2Riga 1 Cella 3
Riga 2 Cella 2Riga 2 Cella 3
Riga 3 Cella 1

HTML - Spacing the cells

Con l'aiuto degli attributi 'cellpadding' e 'cellspacing' stabiliamo la distanza tra le celle. La 'Cellspacing' stabilisce la dimensione del bordo e 'cellpadding' la distanza tra il bordo e il contenuto. Nell'esempio seguente è stato aggiunto anche un po' di colore.

html<table border="1" cellspacing="10" bgcolor="rgb(0,255,0)"> 
	<tr> 
		<th>Colonna 1</th>
		<th>Colonna 2</th> 
	</tr> 
	<tr>
		<td>Riga 1 Cella 1</td>
		<td>Riga 1 Cella 2</td>
	</tr>
	<tr>
		<td>Riga 2 Cella 1</td>
		<td>Riga 2 Cella 2</td>
	</tr> 
</table>

Per fare la differenza è possibile cancellare il bordo dall'esempio precedente.

La distanza tra le celle e la dimensione del bordo sarà interpretata in pixel dal browser. Usando questa 'legge' un valore di 10 significa in realtà 10 pixel. Questo attributo non è l'unico che usa come unità di misura dei pixel, ma ne conosceremo gli altri man mano che procediamo con i prossimi tutorial.