Scegliere la corretta configurazione delle tabelle di struttura per la pagina
Una volta creata la nostra pagina vergine, come visto nella scorsa lezione, siamo pronti a costruire la struttura di layout in cui inserire successivamente i contenuti. Abbiamo scelto le tabelle come strumento d'impaginazione perché garantiscono maggiore compatibilità con i diversi tipi di browser e anche il miglior effetto estetico. A questo punto si presentano alcune alternative. La prima è decidere se incapsulare l'intera pagina in una grande tabella che poi ne conterrà altre, oppure se ridurre al minimo la quantità di tabelle presenti nella pagina facendo affidamento sullo spontaneo allineamento delle stesse tra loro e sulla possibilità di affiancarle e sovrapporle a paragrafi e immagini che fluiscano liberamente nella pagina.
Il primo approccio è anche il più diffuso perché consente un miglior controllo degli elementi e si presta particolarmente alla produzione di template (pagine modello) per un sito dinamico. Infatti, i template di un sito dinamico sono privi dei contenuti che altrimenti sarebbero necessari per tenere al loro posto le tabelle in una pagina a struttura libera, perciò è difficile vedere durante la progettazione quale sarà il risultato finale e nel momento di generare la pagina in automatico prelevando i contenuti dal database, si otterranno risultati variabili al cambiare dei contenuti forniti.
Il secondo approccio, che consiste nel lasciare la pagina libera da una struttura generale e incapsularne solo alcune parti, è preferito dai puristi perché consente di mantenere le pagine più leggere e più semplici. Inoltre, alcuni browser delle precedenti generazioni avevano la brutta abitudine di aspettare il caricamento e l'elaborazione dell'intera tabella globale prima di visualizzare la pagina. Di conseguenza, con pagine complesse, il navigatore doveva aspettare alcuni secondi davanti a uno schermo bianco prima di vedere apparire la pagina tutta in un colpo.
Sezionando la pagina in tabelle autonome, la generazione è più rapida sia perché le prime parti della pagina appaiono subito mentre il browser sta ancora lavorando all'elaborazione delle successive sia perché la semplicità delle tabelle richiede poco impegno elaborativi al browser prima della visualizzazione.
Poiché il primo approccio è comunque sempre più diffuso grazie al diffondersi dei siti dinamici, i principali browser moderni dispongono di una funzione che riduce il ritardo di visualizzazione e che si chiama "rendering progressivo". Il programma comincia a visualizzare i primi elementi della tabella prima di averla caricata per interno. In tal modo, i primi elementi di una pagina lunga e complessa appariranno immediatamente, così da riempire la finestra video che il navigatore sta osservando e dando l’idea che la pagina sia disponibile per intero. In realtà, il browser sta ancora lavorando dietro le quinte per completare l'elaborazione della tabella e comporre la porzione inferiore della pagina così che sia pronta quando decideremo di eseguire lo scrolling.
Di contro può succedere che la pagina compaia inizialmente con un determinato assetto che si modifica dopo alcuni secondi quando il browser ha terminato la lettura della tabella nel suo complesso. L'unico accorgimento da adottare nel progettare una pagina inserita in una tabella globale sfruttando il rendering progressivo è di creare i primi elementi in modo che non siano indipendenti dal resto della tabella. Tipicamente lo si fa creando una prima tabella orizzontale larga nidificata nella tabella primaria e larga quanto l’intera pagina che contenga la barra del logo e i primi elementi di navigazione del sito. Dopo di che si prosegue a scendere con una serie di tabelle che si compongano da sinistra a destra e dall’alto verso il basso.
Qualunque sia la soluzione adottata, vale comunque il criterio di ridurre le tabelle al minimo e, in particolare, di ridurre la nidificazione progressiva delle tabelle (inserimento di una tabella in un'altra) perché una pagina troppo complessa richiede al browser molto tempo per essere elaborata e può anche produrre errori inaspettati.
Fluido, statico o misto
La seconda scelta importante è decidere se la struttura della nostra tabella avrà dimensioni fisse oppure variabili. HTML consente infatti di specificare la larghezza della tabella e delle relative celle (colonne) in pixel oppure in percentuale. Se indichiamo un valore in pixel la tabella resterà di quella dimensione qualunque sia l'ampiezza della finestra disponibile per il browser sul computer dell'utente. Nel caso invece di valori percentuali, la tabella si allargherà o si stringerà (compatibilmente con i contenuti) al variare della dimensione della finestra di navigazione. È anche possibile adottare una soluzione mista dove solo alcune colonne abbiano una dimensione fissa, ad esempio quelle contenenti i link di navigazione del sito, mentre le altre abbiano una dimensione variabile, ad esempio quelle che contengono il testo.
Diverso comportamento delle tabelle a larghezza fissa e variabile
Le tabelle a larghezza fissa, indicata in pixel, mantengono il proprio assetto qualsiasi sia la dimensione della finestra del browser. Perciò, nel caso in cui quest'ultima si riducesse al di sotto delle dimensioni necessarie, una parte della tabella diventerebbe invisibile. Viceversa le tabelle a dimensione variabile, espressa in percentuale, modificano la propria ampiezza in funzione della dimensione della finestra e hanno perciò un aspetto meno prevedibile. Trovate l'esercizio su come costruire questa tabella nel CD.

Pagine ad assetto variabile
Vediamo un esempio reale di pagina costruita integralmente con un layout fluido. La videata 1 è larga 1005 pixel (mintor da 1024 x 768 pixel), la 2 è larga 735 pixel e la 3 è larga 502 pixel. Qualunque siano le dimensioni della finestra del browser, tutti gli elementi rimangono visibili. La cononna di navigazione a sinistra ha dimensione fissa, mentre la colonna di testo e la barra orizzontale contenente il logo e la navigazione globale sono flessibili. L'unico elemento orizzontale che non si adatta è il banner, che naturalmente ha dimensione fissa e scompare parzialmente quando la finestra viene ridotta alla posizione 3.

Tag fondamentali di una tabella
Qualunque sia l'impostazione progettuale, una tabella si apre e si chiude sempre con i tag <table> e </table> all’interno di quali troviamo una serie di righe delimitate dai tag <tr> e </tr> che a loro volta contengono un certo numero di celle contrassegnate dai tag <td> e </td>. Prendendo a prestito una metafora dal libro "HTML 4 Tutto & Oltre", costruire una tabella è come erigere un muro. Si crea la base con <table> quindi si stende il primo strato di cemento con <tr> si posano diversi mattoncini in sequenza con <td> e </td> dopo di che si passa al nuovo strato di cemento con </tr> e <tr>. Il numero di righe può variare liberamente, ma il numero di celle deve essere costante riga per riga altrimenti sarà impossibile costruire le colonne. In alternativa è consentito usare speciali comandi per estendere una cella su più colonne in orizzontale o su più righe in verticale, ma si tratta di soluzione usata di rado per le tabelle di layout e sconsigliata anche per le tabelle di dati, visto che si presta a interpretazioni diverse da parte dei browser.
Struttura di una tabella semplice
Una tabella si apre e si chiude con la coppia di tag <table></table>. Ogni riga è identificata da una coppia di tag <tr></tr> e al loro interno troviamo varie celle, disposte in sequenza, e ciascuna delimitata dalla coppia di tag <td></td>. Affinché la tabella sia valida e visualizzabile deve contenere almeno una riga che contenga almeno una cella. Le celle vuote non vengono visualizzate da alcuni browser perciò ciascuna cella lasciata vuota per motivi estetici (spaziatura) dovrebbe almeno contenere uno spazio fisso - non breaking space, ossia il simbolo &nbps;.

Se per errore il numero di celle presente in una riga non corrispondesse alle altre, la tabella sarà scombinata e la visualizzazione risultante sarà confusa. Ne consegue che è difficile realizzare tabelle molto complesse senza perderne il controllo. I principali errori di codifica di una pagina HTML risiedono proprio nella costruzione delle tabelle. In particolare, una tabella non chiusa propriamente con il tag finale </table> può scombinare la pagina al punto da renderla irriconoscibile. Possono nascere problemi anche dalla mancata chiusura dei tag interni di riga o di cella.
Fortunatamente i browser moderni dispongono di strumenti particolari per compensare la complessa gestione delle tabelle. Internet Explorer, ad esempio, completa automaticamente una riga non chiusa quando incontra il marcatore d’inizio della successiva (<tr>) e riesce anche a risolvere alcuni dei casi di tabella non chiusa.
Più rigidi sono invece Netscape Navigator e Opera; per tale motivo si consiglia sempre di eseguire un’anteprima della pagina con uno di questi programmi prima di rilasciarla definitivamente.
|