Le tabelle, non presenti nelle prime versioni di HTML, sono state introdotte per risolvere il problema del posizionamento e organizzazione dei dati all'interno di una pagina. Facili da usare, si implementano con il solo ausilio dei tag <table>, <tr> e <td>. In particolare il tag <table> indica l'inizio di una tabella in cui <tr> sono le righe e <td> le celle.

Volendo realizzare una tabella di tre righe e due colonne (due celle per riga) andremo a scrivere:

<table>

<tr><td>riga1,cella1</td><td>riga1,cella2</td></tr>

<tr><td>riga2,cella1</td><td>riga2,cella2</td></tr>

<tr><td>riga3,cella1</td><td>riga3,cella2</td></tr>

</table>

Ad ogni tabella è associabile anche un titolo ed una intestazione per righe e colonne. Queste vengono attribuite semplicemente tramite l'utilizzo dei tag <caption> per il titolo della tabella e <th> per l'intestazione di righe o colonne.

Volendo realizzare la tabella precedente dal titolo “Prima tabella in HTML” e intestazione delle due colonne “colonna1” e “colonna2” andremo a scrivere il seguente codice HTML:

<table>

<caption>Prima tabella in HTML</caption>

<tr><th>colonna1</th><th>colonna2</th></tr>

<tr><td>riga1,cella1</td><td>riga1,cella2</td></tr>

<tr><td>riga2,cella1</td><td>riga2,cella2</td></tr>

<tr><td>riga3,cella1</td><td>riga3,cella2</td></tr>

</table>

Nel caso invece in cui volessimo l'intestazione per ogni riga basterà scrivere:

<table>

<tr><th>riga1</th><td>riga1,cella1</td><td>riga1,cella2</td></tr>

<tr><th>riga2</th><td>riga2,cella1</td><td>riga2,cella2</td></tr>

<tr><th>riga3</th><td>riga3,cella1</td><td>riga3,cella2</td></tr>

</table>

Avrete sicuramente notato che non si fa altro che inserire l'intestazione delle colonne in una nuova riga creata appositamente allo scopo, mentre nel caso dell'intestazione di righe andiamo ad inserirla nella prima cella di ogni riga.

<< Pagina Precedente|Menù guida HTML|Pagina successiva >>