1. Stabilità delle dimensioni
Abbiamo costruito una tabella composta da due righe di tre celle ciascuna assegnando alla tabella nel suo complesso una larghezza interna di 400 pixel (incluso il bordo).
Fase 1: impostare solo la larghezza della tabella
la tabella è completamente vuota e lo spazio viene ripartito equamente tra le tre celle che diventano ciascuna di 130 pixel. La loro somma ci dà 390 pixel, gli altri 10 pixel che mancano per arrivare a 400 sono utilizzati per il bordo della tabella, largo 1 pixel di default e calcolato su entrambi i lati, e per la spaziatura tra le celle, larga 2 pixel di default, e riportata quattro volte per spaziare 3 celle, per un totale di 8 pixel.

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: dimensioni modificate dal testo
inseriamo il testo e notiamo come questo influenza la distribuzione naturale degli spazi. La seconda cella della prima riga si allarga per adattarsi a una scritta che è più lunga delle altre due e determina anche l'allargamento automatico della cella seguente che appartiene alla stessa colonna. Adesso la ripartizione degli spazi, attuata automaticamente dal browser è di 120, 150 e 120 pixel. La seconda colonna si è allargata a spese delle altre due. La tabella mantiene le sue dimensioni originali.

Regola: il testo inserito nelle celle ne influenza la dimensione originale a meno di aver indicato una larghezza fissa per la singola cella, in aggiunta alle indicazioni di larghezza della tabella. Lo spazio viene ripartito in modo diverso tra le celle in funzione del contenuto e si applica in modo uniforme a tutte le celle di quella colonna, mantenendo invariata la larghezza complessiva della tabella.
Fase 3: impostare la larghezza di una cella
forziamo la dimensione della prima cella della prima riga indicando, a livello di cella singola, una larghezza di 200 pixel (a cui si aggiungono i 4 pixel del bordo destro e sinistro all'esterno). La cella e la relativa colonna si allargano indipendentemente dal contenuto e costringono le altre due celle a restringersi. Queste però si restringono diversamente in funzione del testo contenuto. La situazione finale è la seguente: 204, 104 e 82 pixel.

Regola: l'impostazione di larghezza definita a livello di singola cella ha la priorità sulle impostazioni di larghezza della tabella e sul testo eventualmente contenuto. Basta impostare la larghezza di una sola cella per modificare l'intera colonna a cui appartiene.
Fase 4: dimensioni modificate da un'immagine
aggiungiamo un'immagine larga 179 pixel e alta 56 pixel nella terza cella della seconda riga. Le altre due colonne si restringono, ma in modo diverso. La prima colonna, per la quale avevamo specificato una larghezza obbligata di 200 pixel si riduce a 146 pixel, mentre la seconda colonna, che in origine era la più larga avendo anche il testo più lungo, ma per la quale non abbiamo indicato nessuna larghezza minima, si restringe al punto di mandare il testo a capo e determinare in tal modo una maggiore altezza per tutta la prima riga. La tabella mantiene comunque le sue dimensioni originali e la ripartizione degli spazi adesso è: 146, 61 e 183 pixel (179 dell'immagine più i quattro di contorno).

Regola: un immagine grafica ha sempre priorità rispetto al testo e rispetto a qualsiasi impostazione di larghezza definita per le singole celle o per la tabella nel suo complesso. La presenza di un'immagine determina in modo immutabile la dimensione della cella, della riga e della colonna a cui questa appartiene.
Fase 5: celle che eccedono la larghezza della tabella
aggiungiamo la stessa immagine anche nella seconda cella della seconda riga il che determina l'espansione della seconda colonna per intero alle dimensioni dell'immagine e il restringimento della prima colonna ai minimi termini, però insufficienti a mantenere le dimensioni originali della tabella che deborda oltre il limite imposto di 400 pixel portandoci alla una situazione: 43, 183 e 183 pixel.
Regola: la somma delle larghezze imposte alle singole celle può superare la larghezza massima definita per la tabella nel qual caso la tabella si allargherà per adattarsi alle nuove misure. La presenza si elementi grafici in una cella ne blocca le dimensioni impedendone la compressione.
Pagina originale che contiene le tabelle di esempio >
Visualizzazione delle tabelle nei principali browser
Internet Explorer

Netscape Navigator

Opera

|