Realizzare layout non regolari usando funzioni particolari delle tabelle
Nella definizione del layout di una pagina è raro trovarsi con le strutture molto regolari consentite dalle tabelle semplici con un numero uniforme di celle per ciascuna riga. Anche ricorrendo a tabelle multiple consecutive, non si riesce a riprodurre l'effetto desiderato e bisogna creare forme più complesse mediante l'estensione di celle su più righe e colonne oppure mediante l'innesto di una tabella nell'altra. L'estensione di una cella su più righe o colonne è un'operazione poco intuitiva e delicata perché i browser la interpretano a modo loro. I puristi consigliano di evitarla, ma esistono diverse situazioni in cui non è possibile farne a meno, perciò tanto vale padroneggiarla. L'operazione si basa sull'impiego di due attributi del tag <td>, ossia colspan per indicare su quante colonne si debba estendere la cella in orizzontale e rowspan per indicare su quante righe debba estendersi in verticale (vedi sul CD l'articolo dettagliato "Creare tabelle complesse").
È più facile capire il funzionamento di questi due attributi se li consideriamo capaci di unire due celle adiacenti per formarne una sola. In effetti questa è esattamente l'operazione compiuta da alcuni editor visuali nel momento in cui chiediamo di estendere una cella in orizzontale o verticale. Se invece lavoriamo a mano, dobbiamo occuparci di cancellare personalmente la cella contingua nel cui spazio vogliamo estendere la cella espansa. In pratica quando aggiungiamo colspan o rowspan entro una cella esistente, questa si allargherà ad occupare lo spazio della cella adiacente facendo scorrere tutte le celle della riga o della colonna di una posizione, scombinando la struttura della tabella. Togliendo la cella di cui abbiamo preso il posto, la tabella si rimette a posto.
Oltre a consentire maggiore flessibilità estetica nella riproduzione degli spazi, le celle espanse svolgono anche una funzione di controllo sulla porzione di tabella a cui appartengono. Ad esempio, una cella espansa in orizzontale riunisce diverse colonne in modo che queste definiscano le proprie ampiezze in relazione al raggruppamento prima ancora che in relazione alla tabella nel suo insieme. Le celle estese diventano quindi anche uno strumento d'impaginazione, ma purtroppo risultano persino più incostanti nel comportamento rispetto alle celle singole. Un criterio generale che può aiutare a orientarsi è di considerarle come un livello intermedio tra la tabella e la singola cella. HTML è costruito secondo una logica di concatenazione gerarchica degli attributi tale per cui gli attributi dell'entità maggiore si trasferiscono alle entità minori salvo che queste dispongano di attributi propri che hanno priorità rispetto a quelli ereditati dal livello superiore.
Come abbiamo visto, una larghezza impostata a livello di tabella si divide equamente tra le varie celle a meno che queste non abbiamo indicazioni dimensionali proprie e queste ultime vengono superate da eventuali assestamenti dimensionali determinati dall'inserimento di contenuto nella cella stessa. È la logica dell'assegnare priorità agli attributi in cascata. Una logica che vedremo utilizzata anche dai Cascading Style Sheet (fogli di stile in cascata). Le celle espanse, quindi, hanno attributi tra loro pari, perciò una cella espansa può influenzarne un'altra e avere la meglio sugli attributi dimensionali della tabella nel suo complesso. Sono anche capaci d'influenzare il comportamento dimensionale delle righe e colonne che racchiudono a condizione che queste non contengano indicazioni dimensionali proprie. Per avere un'idea pratica di come si comportano, rimandiamo all'articolo "Creare tabelle complesse" sul CD).
|