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  
 
 

Dimensionare tabelle e celle fluide

 

Costruire tabelle fluide con celle di dimensione variabile

Costruiamo una semplicetabella composta da due righe di tre celle ciascuna assegnandole una larghezza pari al 75% della dimensione totale della finestra del browser.

Fase 1: impostare la larghezza percentuale della tabella
costruiamo una tabella con due righe e tre colonne impostandone la larghezza in termini percentuali usando l'attributo witdh:

<table width="75%" border="1">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

La larghezza viene ripartita in misura uguale tra le diverse colonne:


Clicca per ingrandire

Regola: in mancanza di contenuto e d'indicazioni per le singole celle, il browser cerca di ripartire equamente lo spazio assegnato alla tabella nelle varie colonne.

Fase 2: dimensione esplicita per una colonna
vogliamo fare in modo che una delle colonne abbia una dimensione leggermente ridotta rispetto alle altre, pure mantenendo la piena prerogativa si un layout fluido. Utilizziamo di nuovo l'attributo witdh su una delle celle che compongono la colonna (di solito la prima o l'ultima, ma può essere una qualsiasi):

<table width="75%" border="1">
<tr>
<td>&nbsp;</td>
<td width="30%">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

Abbiamo indicato che la colonna centrale dovrà occupare il trenta per cento dell'intera tabella che a sua volta occupa il 75% della finestra nel suo complesso. Notiamo che le dimensioni delle colonne si riassestano dividendo tra le due rimanenti la larghezza restante, cioè 35% ciascuna:


Clicca per ingrandire

Regola: in una tabella a dimensione percentuale (variabile) le larghezze impostate in valori percentuali per le singole celle si riferiscono al totale della tabella e la loro somma deve sempre produrre 100.

Fase 3: riversare il testo
quando inseriamo un testo che eccede la dimensione della cella le parole vengono mandate a capo creando diverse righe all'interno della singola cella e allungandola in verticale assieme a tutta la riga a cui appartiene:


Clicca per ingrandire

Se proviamo a stringere la finestra notiamo che tutte le colonne si restringono in proporzione e che la dimensione minima a cui la colonna può essere ridotta coincide con la larghezza della parola più lunga contenuta nel testo, in questo caso "automaticamente"


Clicca per ingrandire

Proviamo ora ad allargare la finestra e vediamo che tutte le colonne si allargano di conseguenza, pur mantenendo le proporzioni impostate:


Clicca per ingrandire

Regola: una cella dimensionata in percentuale rispetto alla larghezza complessiva della tabella mantiene la proporzione anche quando contiene testo. Può allargarsi a volontà al crescere della dimensione della finestra, ma si restringe sino alla larghezza consentita dalla più lunga delle parole che contiene.

Fase 4: inserire un'immagine
proviamo a inserire un'immagine all'interno di una cella con dimensione variabile e vediamo che l'assetto della colonna non viene modificato a condizione di non tentare di restringerla al di sotto della larghezza dell'immagine:


Clicca per ingrandire

Se proviamo a restringere la tabella notiamo che la colonna che contenente l'immagine mantiene la propria ampiezza, mentre le altre si restringono al limite consentito dalla parola più lunga che contengono:


Clicca per ingrandire

Regola: l'inserimento di un'immagine grafica falsa il rapporto relativo tra le colonne di una tabella fluida quando la tabella viene ristretta oltre i limiti imposti dalla larghezza dell'immagine.

Trovate la pagina completa contenente la tabella di questo esempio nel file Dimensionare una tabella percentuale >

  < 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