aprile 2003
HOME  |  INDICE  |  CORSI  |  DIZIONARIO  |  ABBONAMENTI  |  SITO  |  HELP
 
   
  CORSI OPENMASTER
  MUSICA DIGITALE  
  WEBMASTER  
 
Lezione 1  
Lezione 2  
Lezione 3  
Lezione 4  
Lezione 5  
Lezione 6  
Editor HTML  
Esercizi  
Risorse  
 
  WINDOWS EXPERT  
 
 

Allineamento spontaneo delle tabelle consecutive

 

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:


Clicca per ingrandire

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>

  < Precedente   Prossimo >

 

Corso - Webmaster
 
  Prima lezione:
  Competenze e strumenti
  Seconda lezione:
  Siti statici e linguaggio HTML
  Terza lezione:
  Modelli di pagina e tabelle
1. La tabella come elemento strutturale
  1. Stabilità delle dimensioni
2. Progettare layout fluidi e statici
3. Costruire template con le tabelle di layout
  1. Tabelle e celle fluide
  2. Tabelle miste
  3. Tabelle consecutive
4. Template con struttura complessa
  1. Tabelle complesse
5. Template con tabelle nidificate
  1. Tabelle nidificate in cascata
  2. Tabelle nidificate complesse
  3. Tabelle nidificate cosecutive
6. Esercizi
  1. Esploriamo i tag delle tabelle
  2. Tabelle semplici con HTML-Kit
  Quarta lezione:
  HTML 4.01 e CSS
  Quinta lezione:
  Design e multimedialità
  Sesta lezione:
  Siti interattivi

 Copyright© PC Open - 2002 - 2003

Credits