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> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
La larghezza viene ripartita in misura uguale tra le diverse colonne:
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> </td>
<td width="30%"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </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:
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:

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"

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

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:

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:

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 >
|