CSS e tabelle a confronto

In questo articolo, dopo una breve introduzione sul perchè sia errato utilizzare le tabelle per impostare la grafica di un sito web, saranno messi a confronto i vantaggi e gli svantaggi dei CSS con i vantaggi e gli svantaggi delle tabelle.

Tra contenuti e forma
Agli inizi, quando Internet era usato come mezzo di comunicazione fra scienziati e ricercatori, il contenuto informativo era l'aspetto più importante della pagina web. Per aiutare i ricercatori a riportare in maniera organizzata dati sperimentali, furono create le tabelle che ,per loro stessa natura, servivano a intabellare dei dati, basti pensare al tag dove l'acronimo tdsta per table data.
Le tabelle sono però in grado di contenere molti tipidi informazioni, non solo parole e numeri, come immagini e altre tabelle. Tra i webmaster si diffuse dunque la cattiva abitudine di utilizzare le tabelle per la realizzazione del layout di un sito, tradendo quello che era lo scopo della loro creazione. Annidando tabelle dentro tabelle è possibile realizzare impaginazioni più o meno complesse. La cosa andò peggiorando con l'introduzione di software per la realizzazione di pagine web del tipo WYSIWYG (What You See Is What You Get:ciò che vedi è ciò che otterrai) che sibasano quasi esclusivamente sull'uso delle tabelle. Il webmaster si trova di fronte a un'interfaccia grafica e" disegna" il layout del sito senza accorgersi che il software sta creando un codice che, nella migliore delle ipotesi è ridondante e disorganizzato, nella maggior parte dei casi risultaanche errato. Si ottengono così pagine pesanti (in termini di dimensione dei files) e lenteda scaricare ed elaborare, spesso non utilizzabili da dispositivi come i PDA ovvero da utenti non vedenti che utilizzano screen reader, solo per fare alcuni esempi. Sipensi ad esempio ad utenti che utilizzano browser vocali o alinea di testo. Il testo sarà letto dall'inizio alla fine nell'ordine in cui compare nel codice, ed essendo il contenuto informativo indissolubilmente mescolato al codice per la grafica capita spesso che l'ordine incui sono lette le informazioni non sia corretto.
Per garantire una completa accessibilità dei contenuti, la grafica deve essere separata dal testo,le tabelle devono intabellare.
Per fornire un'impaginazione ai contenuti esiste una apposita tecnica, quella dei CSS (Cascading Style Sheets: fogli di stile a cascata), di cui ora mostreremo i vantaggi.
CSS Vs
I vantaggi dei CSS
Accesso ai contenuti con qualsiasi dispositivo per la navigazione in Internet, anche per quelli non in grado di interpretare i CSS.
Completa separazione fra contenuti e grafica.
Possibilità di organizzare il contenuto in sezioni e sottosezioni.
Codice (X)HTML semplice e pulito, privo delle ridondanze imposte dalle tabelle.
File più leggeri, più veloci da scaricare e interpretare da parte del browser.
Possibilità di realizzare layout più complessi di quelli possibili con le tabelle.
Associazione di diverse impostazioni del layout per i diversi dispositivi come monitor, PDA, stampanti.
Maggiore coerenza grafica fra le varie pagine di un sito.
Possibilità di cambiare l'aspetto del sito, anche notevolmente, modificando solamente un file.
Abbandono dei disastri compiuti dai software WYSIWYG, per approdare alla tecnica qui definita WYCIWYG (What You Code Is What You Get: ciò che codifichi è ciò che otterrai) che è l'unica che garantisce il totale controllo sul risultato finale.
Gli svantaggi dei CSS
I browser più datati hanno una non corretta interpretazione dei CSS, ciò richiede un minimo d'accortezza al momento delle progettazione. Punto.
I vantaggi delle tabelle
Fanno funzionare i software WYSIWYG. Punto.
Gli svantaggi delle tabelle
Riducono l'accessibilità del sito.
Impediscono di separare i contenuti dal modo in cui sono presentati
Riducono, spesso impediscono, l'organizzazione strutturata dei contenuti.
Codice confuso e ridondante.
Notevole quanto inutile aumento del peso delle pagine.
Minori possibilità grafiche.
Un unico layout per tutti i dispositivi.
Per ogni pagina è necessario ricreare il layout.
Cambiare la grafica di un sito richiede spesso la totale ri-scrittura delle pagine, tutte.
Abbandonare i disastrosi software WYSIWYG e continuare ad utilizzare le tabelle richiede uno sforzo davvero enorme.
Un cambiamento di filosofia
Il confronto fra CSS e tabelle, che vede quest'ultimeinequivocabilmente sconfitte, evidenzia la necessitàdi un cambiamento nel concepire la realizzazione della paginaweb: prima vengono i contenuti e la loro organizzazionestrutturata, poi si realizza uno o più CSS cheistruiscano il browser su come presentare le informazioni. Lavecchia tecnica, disegno una griglia con le tabelle erealizzo la grafica e in seguito ci mescolo i contenutiappartiene al passato e non può più condurre innessun luogo.
Progettare con i CSS, realizzando pagine standard (magari inXHTML) significa progettare per il futuro, senza peròtrascurare il passato: una pagina (X)HTML standard + CSSstandard è accessibile con tutti idispositivi per la navigazione nel web. Certo, i browserpiù datati richiederanno CSS specifici, magaripiù semplici, ma ottenere la stessa grafica su tutti idispositivi/browser non è possibile e neppure utile.Un sito indipendente dal browser è quello in grado dipresentare correttamente i contenuti sututti i browser, non quello che ha la stessagrafica su IE e NN.