Impostare un layout sfruttando l'allineamento in verticale dei blocchi
Una delle tecniche più semplici per costruire il layout di una pagina consiste nel creare diverse tabelle che ne riproducono le varie sezioni e quindi lasciare che si aggancino una di seguito all'altra all'interno della pagina. Un vincolo per ottenere tale risultato è naturalmente che tutte abbiano una larghezza complessiva identica.
Fase 1: costruiamo la prima tabella
utilizzando i tag che già conosciamo, costruiamo una tabella di quattro righe e quattro colonne larga 400 pixel:
<table summary="prima tabella" width="400" border="1">
<tr>
<td> Cella 1</td>
<td>Cella 2</td>
<td>Cella 3</td>
<td>Cella 4</td>
</tr>
<tr>
<td>Cella 5</td>
<td>Cella 6</td>
<td>Cella 7</td>
<td>Cella 8</td>
</tr>
<tr>
<td>Cella 9</td>
<td>Cella 10</td>
<td>Cella 11</td>
<td>Cella 12</td>
</tr>
<tr>
<td>Cella 13</td>
<td>Cella 14</td>
<td>Cella 15</td>
<td>Cella 16</td>
</tr>
</table>
Fase 2: aggiungiamo la seconda tabella
immediatamente di seguito alla prima digitiamo il codice della seconda tabella con tre righe e tre colonne, anche questa con una larghezza di 400 pixel:
<table summary="prima tabella" width="400" border="1">
<tr>
<td> Cella 1</td>
<td>Cella 2</td>
<td>Cella 3</td>
<td>Cella 4</td>
</tr>
<tr>
<td>Cella 5</td>
<td>Cella 6</td>
<td>Cella 7</td>
<td>Cella 8</td>
</tr>
<tr>
<td>Cella 9</td>
<td>Cella 10</td>
<td>Cella 11</td>
<td>Cella 12</td>
</tr>
<tr>
<td>Cella 13</td>
<td>Cella 14</td>
<td>Cella 15</td>
<td>Cella 16</td>
</tr>
</table>
<table summary="seconda tabella" width="400" border="1">
<tr>
<td>Cella 1</td>
<td>Cella 2</td>
<td>Cella 3</td>
</tr>
<tr>
<td>Cella 4</td>
<td>Cella 5</td>
<td>Cella 6</td>
</tr>
<tr>
<td>Cella 7</td>
<td>Cella 8</td>
<td>Cella 9</td>
</tr>
</table>
Fase 3: aggiungiamo la terza tabella
concludiamo il nostro layout con una terza tabella dotata di due righe e cinque colonne, immediatamente successiva alla seconda e di larghezza identica:
<table summary="prima tabella" width="400" border="1">
<tr>
<td> Cella 1</td>
<td>Cella 2</td>
<td>Cella 3</td>
<td>Cella 4</td>
</tr>
<tr>
<td>Cella 5</td>
<td>Cella 6</td>
<td>Cella 7</td>
<td>Cella 8</td>
</tr>
<tr>
<td>Cella 9</td>
<td>Cella 10</td>
<td>Cella 11</td>
<td>Cella 12</td>
</tr>
<tr>
<td>Cella 13</td>
<td>Cella 14</td>
<td>Cella 15</td>
<td>Cella 16</td>
</tr>
</table>
<table summary="seconda tabella" width="400" border="1">
<tr>
<td>Cella 1</td>
<td>Cella 2</td>
<td>Cella 3</td>
</tr>
<tr>
<td>Cella 4</td>
<td>Cella 5</td>
<td>Cella 6</td>
</tr>
<tr>
<td>Cella 7</td>
<td>Cella 8</td>
<td>Cella 9</td>
</tr>
</table>
<table summary="terza tabella" width="400" border="1">
<tr>
<td>Cella 1</td>
<td>Cella 2</td>
<td>Cella 3</td>
<td>Cella 4</td>
<td>Cella 5</td>
</tr>
<tr>
<td>Cella 6</td>
<td>Cella 7</td>
<td>Cella 8</td>
<td>Cella 9</td>
<td>Cella 10</td>
</tr>
</table>
Ecco il risultato grafico finale:

Regola: Il browser allinea automaticamente le tabelle poste consecutivamente nella pagina presentandole come un tutt'uno, anche se queste hanno un numero diverso di colonne. L'allineamento risulta perfetto se la larghezza complessiva delle tabelle è uniforme.
Trovate la pagina completa contenente la tabella di questo esempio nel file Tabelle consecutive>
|