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  
 
 

La tabella come elemento strutturale

 

Comporre gli elementi della pagina utilizzando una tabella di riferimento invisibile.

Cominciamo la nostra esplorazione in dettaglio del linguaggio HTML dalle tabelle, un tema che non viene mai affrontato per primo nei testi e nei corsi su questo linguaggio in ragione della sua complessità, ma che bisogna invece conoscere da subito al fine di progettare pagine funzionali. Oltre alla loro funzione primaria, che consiste nel rappresentare informazioni tabulari, le tabelle costituiscono il più diffuso sistema di "impaginazione" per le pagina Web. Funzionano come una griglia invisibile, che suddivide lo spazio della pagina in contenitori ben definiti in cui riversare testo e immagini. Il professionista perciò inizia il proprio lavoro su una pagina vergine proprio dalla progettazione della tabella e prosegue, poi, con il riversamento dei contenuti e l'aggiunta degli elementi stilistici.

Come qualsiasi altro elemento HTML, anche le tabelle operano nella logica della "telescrivente", ossia vengono lette dal browser un carattere alla volta, dall'inizio dalla fine della riga, per poi cominciare con la riga successiva. Non esiste modo di sapere come una tabella sia esattamente composta fino a che il browser non è arrivato in fondo alla lettura dei vari tag che la compongono. Basta un tag sbagliato oppure mancante, per scombinare l'intera pagina e renderla incomprensibile al suo stesso progettista.

La tabella è una sequenza lineare
HTML costruisce le tabelle secondo una sequenza lineare, come se fosse una telescrivente: una cella dopo l'altra sino a completare la riga e quindi ritorna all'inizio della riga successiva e riprende la costruzione fino a terminare la tabella. Solo alla fine dell'ultima cella dell'ultima riga il browser sa esattamente come sia composta la tabella.


Clicca per ingrandire

Inoltre, come qualsiasi altro elemento HTML, le tabelle cambiano il proprio funzionamento a seconda della versione di browser utilizzato e del modo in cui il codice originale è stato scritto. Codifiche teoricamente equivalenti e sintatticamente corrette possono produrre risultati visibilmente diversi. È proprio in questo ambito che i cosiddetti editor HTML visuali mostrano le maggiori differenze producendo in automatico codice HTML che talvolta va rivisto riga per riga dal progettista per eliminare gli "errori" introdotti dal programma.

La corretta gestione delle tabelle è quindi una vera e propria arte e costituisce uno dei pilastri essenziali su cui si regge il lavoro di chi costruisce siti. A differenza delle tabelle costruite da un foglio elettronico o da un wordprocessor, che hanno righe e colonne ben identificate e regolabili singolarmente, le tabelle HTML sono semplicemente sequenze di righe e di celle all’interno di tali righe. Non esiste alcun marcatore per definire le colonne in quanto tali e il concetto stesso di colonna viene simulato grazie all'intervento del browser che, combinando diverse celle appartenenti a righe consecutive, crea l'impressione di un'unità verticale.

La tabella in quanto tale viene costruita dal browser combinando i vari tag che definiscono una serie di righe sequenziali che contengono una serie di celle le quali, combinandosi con quelle di pari posizione nella riga precedente e nella riga successiva, danno l’impressione di formare colonne verticali, che in realtà non esistono.

Il browser intraprende alcune azioni autonome per aggiustare e modificare l'aspetto originale delle celle in modo da creare un risultato ritenuto migliore, ma che potrebbe anche essere diverso dal l'intendimento originale del progettista.

Regole da conoscere
Ecco alcune regole da tenere a mente. Qualsiasi dimensione specificata per la tabella e per le celle dal progettista viene intesa dal browser come dimensione minima e puramente indicativa. Nel caso in cui abbiamo indicato unicamente la larghezza della tabella, come consigliato da alcuni, questa sarà ripartita tra le diverse celle, in parti più o meno uguali e sarà quindi modificata dal contenuto inserito (immagine o testo). La larghezza di una riga coincide sempre con la larghezza della tabella o con la somma delle larghezze specificate per le celle che la compongono. Non esiste modo per definire la larghezza della riga in quanto tale.

Nel caso in cui tale somma superasse la larghezza specificata in origine per la tabella, quest'ultima si allargherà per adattarsi (qualsiasi cosa definito a livello di cella ha sempre la precedenza su tutto il resto). La più grande delle celle di una colonna determina la larghezza di tutte le altre di quella colonna, anche se avessimo esplicitamente indicato larghezze inferiori per le altre celle di quella colonna. Nella pratica è sufficiente indicare la larghezza di una sola cella della colonna affinché tutte le altre si adattino di conseguenza. Se inseriamo nella cella un'immagine che ne supera le dimensioni, la cella si allargherà automaticamente in modo da contenere l'immagine inserita e farà allargare tutte le celle che corrispondono alla stessa colonna. L'allargamento porterà pressione sulle celle circostanti riducendone le dimensioni originali, se tuttavia anche queste contenessero un'immagine, incomprimibile per definizione, l'intera tabella deborderebbe oltre i limiti consentiti.

Le immagini hanno una fortissima influenza sul comportamento delle tabelle tanto che per lungo tempo i progettisti Web le hanno usate come strumento di costruzione della pagina, ben sapendo che un'immagine non può essere né allungata né compressa e che perciò la cella in cui essa è contenuta rimarrà stabile qualsiasi cosa succeda al resto della tabella. Il trucco classico consiste nel prendere un'immagine di colore invisibile larga un pixel e quindi dimensionarla (altezza e larghezza) all'interno della cella di cui vogliamo bloccare le dimensioni. Di solito viene inserita nell'ultima riga della tabella, che per il resto rimane vuota, così da condizionare tutte le altre celle presenti nella stessa colonna. Lo stesso trucco può essere ripetuto su più celle fino a bloccare l'intera tabella.

Questo genere di artificio (definito "shim" inglese cioè "zeppa" oppure "immagine spaziatrice" in italiano) è tutt'ora in uso, ma presenta l'inconveniente d'inserire elementi estranei nella tabella e di perdere l'efficacia qualora il navigatore avesse disattivato la visualizzazione delle immagini sul proprio browser. L'uso delle immagini spaziatrici è considerato peccato grave dai puristi, ma è sicuramente utile in alcune circostanze.

La flessibilità delle tabelle, se conosciuta e governata, può trasformarsi in un pregio progettuale portando a quello che viene definito progetto "fluido" o "liquido", vale a dire una struttura della pagina capace di adattarsi alla risoluzione del monitor su cui è visualizzata.

La regola generale è comunque di mantenere più semplici possibili le tabelle strutturali, usandole solo dove necessario ed evitando, se possibile, di nidificarne, ossia di innestare una tabella dentro l'altra. Una pagina composta di tabelle molto complesse e incapsulate l'una nell'altra finisce per essere pesante e per richiedere tempo prima di poter essere elaborata e visualizzata dal browser, senza contare le possibilità di errore, che si moltiplicano al crescere del numero di tag utilizzati.

  < 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