Layout a tabelle o a div?

Warning: Undefined array key "juiz_sps_order" in /membri/saitfainder/wp-content/plugins/juiz-social-post-sharer/inc/front/buttons.php on line 302

Il giovane webmaster che si avvicina per la prima volta alla realizzazione di un layout di proprio pugno riceverà un input imperativo: non usare le tabelle. In realtà le tabelle non sono il male!

Molto spesso il webmaster inesperto viene preso di mira da un nutrito gruppo di terroristi informatici che tentano di inculcare l’idea che le tabelle sono il male assoluto. Perché questo? Prima della diffusione dei CSS, e quindi della separazione tra contenuto e presentazione, il web era molto meno colorato e la struttura delle pagine molto più semplice. Questa semplicità era anche dovuta a una mancanza di strumenti per la realizzazione di layout complessi. Creare una pagina a più colonne non era possibile se non utilizzando, appunto, le tabelle. I webmaster cominciarono ad abusare di questo strumento arrivando a realizzare pagine di elevata complessità sostanzialmente annidando tabelle.

Quando cominciò a farsi strada l’uso dei CSS cominciò a diffondersi l’idea che il layout non doveva essere realizzato usando le tabelle perché se ne faceva un uso improprio. L’idea divenne tanto forte che i giovani webmaster arrivano a pensare che la tabella sia una specie di tag deprecato.

In realtà tutta la questione è nell’abuso semantico che se ne fà. La tabella è un elemento che contiene righe e colonne e che serve, appunto, a presentare una tabella. A volte, invece, si trovano addirittura delle guide su come realizzare una tabella con i DIV! Certo, si riesce, ma a prezzo di uno sforzo maggiore per un risultato potenzialmente inferiore. Insomma, va bene non usarle per il layout, ma non va tanto bene non usarle quando si dovrebbe.

Veniamo al nodo della questione. Chi ha provato a realizzare un layout a DIV si sarà reso conto subito di un grandissimo problema: è impossibile fare in modo che due div separati abbiano la stessa altezza. E una mancanza dei CSS che non mettono in relazione due elementi annidati. Il problema si palesa quando si realizza, ad esempio, un menu di navigazione laterale. Inevitabilmente sarà più corto (o più  lungo) del div che contiene il contenuto. Come detto i CSS non prevedono una soluzione diretta a questo problema, ma si dovrà per forza di cose percorrere una di queste strade:

• Dimensioni statiche Ovviamente si potrebbe impostare un valore fisso per l’altezza, ma quasi sicuramente il risultato sarà scadente
• Javascript Un’opportuna funzione javascript chiamata all’onload della pagina può mettere le cose a posto. Abbastanza efficace, ma in caso di ritardi può causare dei momentanei disallineamenti. La compatibilità non è male.
• Sfondo Una soluzione un po’ strana. Ipotizziamo di avere un layout a due colonne. Invece di dare uno sfondo alle due colonne (con cui risulterebbe evidente il problema) diamo uno sfondo al div che le contiene entrambe. Lo sfondo è fatto in modo da avere il colore giusto in corrispondenza della colonna giusta. Ingegnoso, compatibile, ma poco ortodosso.
• Tabella Eccola qui 😀 Usare una tabella è in definitiva l’ideale, a patto di non essere dei puristi dell’HTML.

Ognuno sceglierà a proprio piacimento. Recentemente ho visto che il famoso Twitter, simbolo del Web 2.0, ha un layout a tabelle. Un fatto quantomeno curioso.files/files/