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 con celle miste (dimensione fissa e percentuale)

 

Costruire tabelle fluide con celle di dimensione variabile e fissa

Modifichiamo la tabella ad assetto variabile vista nell'articolo precedente inserendo colonne di larghezza fissa creando così un impianto misto.

Fase 1: inserire una colonna fissa in una tabella fluida
costruiamo una tabella con due righe e tre colonne impostandone la larghezza in termini percentuali e definiamo la larghezza massima di 120 pixel per una delle sue colonne, utilizzando l'attributo width sulla prima cella della colonna:

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

Notiamo che la colonna a dimensione fissa (la prima) si adatta alla dimensione imposta lasciando le altre libere di espandersi a riempire il totale della tabella.


Clicca per ingrandire

Proviamo a restringere la finestra e notiamo che le due colonne a dimensione variabile si riducono ai minimi termini mentre la colonna fissa conserva la propria dimensione originale:

Tuttavia se aggiungiamo testo nelle due colonne a dimensione variabile e stringiamo la tabella oltre il limite dimensionale della colonna fissa, questa si restringerà, cedendo spazio alle altre che invece si bloccheranno alla larghezza della parola più lunga contenuta. Come abbiamo visto nell'esempio precedente relativo alle tabelle a dimensione fissa "Stabilità delle dimensioni" la dimensione in pixel indica un valore massimo di larghezza, che tuttavia il browser è comunque libero di restringere:

Proviamo alla fine ad allargare la finestra al massimo, notiamo che la colonna a dimensione fissa blocca la propria espansione al valore indicato, mentre le altre si estendono a piacere:


Clicca per ingrandire

Regola: è possile combinare colonne a dimensione variabile e colonne a dimensione fissa nella stessa tabella. Le prime si ridimensionano a piacere e le seconde non possono espandersi oltre la larghezza definita, ma possono comprimersi.

Fase 2: bloccare la colonna
l'unico modo per bloccare la larghezza colonna sia un espazione sia in contrazione consiste nell'inserire un'immagine invisibile larga quanto la colonna all'interno di una cella e di una riga invisibili collocati in fondo alla tabella:

<table width="75%" border="1">
<tr>
<td width="120">&nbsp;</td>
<td>Cosa succede invece se nella nostra tabella fluida volessimo bloccare una colonna? </td>
<td>Cosa succede invece se nella nostra tabella fluida volessimo bloccare una colonna? </td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td height="5"><img src="pixel.gif" alt="immagine spaziatore" width="114" height="1"></td>
<td></td>
<td></td>
</tr>
</table>

Abbiamo usato allo scopo il tag <img> che consente d'inserire un'immagine indicandone anche le dimensioni da visualizzare nella finestra, che possono essere diverse rispetto alla dimensione originale dell'immagine che in questo caso sono di 1 x 1 pixel e sono state estese a 114 x 1 pixel. Notate che il valore di 114 corrisponde ai 120 pixel di larghezza impostati per la colonna ridotti del bordo e degli spazi interni alle celle.

Notate che la prima colonna non si restringe più e si restringono invece quelle a dimensione variabile, fin dove consentito dal testo che contengono.

Regola: l'unico modo per inserire una colonna a larghezza bloccata in una tabella fluida consiste nel vincolare le dimensioni della colonna mediante l'aggiunta di un'immagine di pari dimensioni.

Fase 3: dare priorità a una colonna
uno stratagemma per dare sempre la massima ampiezza a una sola delle colonne della pagina consiste nell'attribuirle una larghezza del 100% così che la somma totale delle colonne superi il 100% della pagina. La colonna "truccata" occuperà sempre tutto lo spazio libero disponibile:

<table width="75%" border="1">
<tr>
<td width="120">&nbsp;</td>
<td width="100%">Cosa succede invece se nella nostra tabella fluida volessimo bloccare una colonna? </td>
<td>Cosa succede invece se nella nostra tabella fluida volessimo bloccare una colonna? </td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td height="5"><img src="pixel.gif" alt="immagine spaziatore" width="114" height="1"></td>
<td></td>
<td></td>
</tr>
</table>


Clicca per ingrandire

Regola: una cella dimensionata all 100% ha la priorità rispetto a tutte le altre celle a dimensionamento percentuale o non dimensionate.

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

  < 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