DIV e CSS o Tabelle
DIV e CSS o Tabelle? Quali sono i vantaggi e gli svantaggi?
La costruzione di un layout web può essere fatta fondamentalmente in 2 modi:
- Tabelle + codice HTML
- DIV + CSS (Cascade Style Sheet o Fogli di Stile)
Le TABELLE permettono di costruire l’intera struttura di una pagina web con molta facilità, con un layout che risulta simile per la maggior parte dei browser. L’utilizzo dei DIV, definito dal W3C come raccoglitore di elementi, permette di definire il contenuto a livello di blocco, ma deve essere abbinato ai CSS per creare un layout web correttamente formattato. La domanda che possiamo porci è quella del titolo dell’articolo: “meglio DIV e CSS o meglio le TABELLE“? Per poter dare una risposta a questa domanda dobbiamo valutare i pro ed i contro di entrambe le soluzioni. In ogni caso la scelta sarà sempre personale. Alla fine dell’articolo vi farò conoscere anche la soluzione che ho adottato e che, come leggerete, non va in una unica direzione.
Vantaggi utilizzo DIV e CSS
Sono 2 i principali vantaggi che si hanno nell’utilizzo dei DIV e CSS:
- layout più pulito e leggero, con conseguente diminuzione dei tempi di caricamento delle pagine. Ricordo che la velocità di caricamento della pagina è uno dei parametri tenuti in considerazione dai motori di ricerca. Inoltre evita che un utente abbandoni la pagina se questa richiede tempi lunghi di caricamento;
- ottima divisione tra contenuto (DIV) ed impostazione grafica (CSS). Utilizzando un foglio di stile esterno si ha la possibilità di cambiare l’aspetto del sito agendo solo su questo file CSS.
Svantaggi utilizzo DIV e CSS
L’utilizzo corretto di DIV e CSS richiede una conoscenza approfondita del codice HTML + CSS. Oltre a questo, altri svantaggi sono:
- maggiore tempo nella realizzazione di un layout complesso;
- compatibilità con i vari browser, che interpretano in maniera diversa i vari elementi CSS.
Vantaggi utilizzo tabelle
- maggiore facilità nella costruzione di un layout web anche complesso;
- maggiore compatibilità con i diversi browser;
- maggiore complessità di codice e poca chiarezza dei contenuti;
- le tabelle nidificate non sono apprezzate dai motori di ricerca;
- non rappresentano il futuro del web (HTML 5).
Dal punto di vista SEO, a parte la velocità di caricamento e l’utilizzo di tabelle nidificate (sconsigliata), i motori di ricerca non fanno differenze a livello di indicizzazione tra pagine con tabelle e pagine che utilizzano DIV e CSS. Il punto che invece mi interessa approfondire è quello della compatibilità con i differenti browser. Quando si progetta un sito web, lo si crea per essere visualizzato correttamente sulla maggior parte dei browser. Oggi i browser più usati sono: Chrome, Firefox, Internet Explorer, Opera e Safari (quest’ultimo presente soprattutto sui sistemi MAC). Le ultime versioni (Chrome 42.0, IE 11.0, Firefox 37.0 e Safari 8) presentano comunque una buona compatibilità verso i CSS. Un ottimo sito che vi fornisce la compatibilità dei diversi elementi CSS con i principali browser è Can I Use.
Indicazioni operative
Volevo concludere l’articolo con alcuni consigli operativi personali, che mi permettono di ottenere layout correttamente visualizzati sui diversi browser:
- se devo realizzare siti in WORDPRESS cerco di utilizzare template già testati. Nel caso debba inserire nel template informazioni in forma tabellare, che sarebbe troppo complesso realizzare con i DIV + CSS, uso le classiche TABELLE;
- quando realizzo un sito con solo codice HTML+CSS, non uso quasi mai le tabelle, a meno che non riscontri problemi di compatibilità difficilmente risolvibili con DIV e CSS. In poche parole se una tabella mi risolve il problema velocemente non perdo tempo a cercare un’altra soluzione;
- utilizzo i principali browser (CHROME, IE, FIREFOX, OPERA e SAFARI) per testare il sito, consapevole che la visualizzazione presenterà differenze nei diversi browser.
Tenete conto inoltre che il presente ed il futuro del web è l’accoppiata HTML 5 + CSS 3. Il nuovo linguaggio di markup avrà un impatto sempre maggiore non solo sulle nuove versioni dei browser ma anche in ambito SEO.
