Div Css o Tabelle? Pro e contro

Durante la creazione di un layout web esistono due diverse scuole di pensiero: l’utilizzo di DIV formattati attaverso l’uso di CSS o l’utilizzo di tabelle o di Tag HTML.

Le tabelle, oltre ad avere la funzione di rappresentare dati allineati in righe e colonne, sono utilizzate per costruire l’intera struttura di una pagina web. Con le tabelle si può definire il layout di una pagina web in modo da disporre il testo su colonne multiple e ottenere allineamenti anche molto complessi.

I DIV, invece, sono raccoglitori di elementi, questi elementi definiscono il contenuto o come in riga (SPAN) o come a livello di blocco (DIV), ma non impongono alcun altro idioma presentazionale sul contenuto. Pertanto, gli autori possono usare questi elementi in congiunzione con i fogli di stile, ecc. per adattare l’HTML ai propri bisogni e ai propri gusti.

Diciamo che l’uso delle tabelle è più intuitivo e sicuramente più semplice, si ha la certezza che il layout risulti simile su quasi tutti i browser web ed eventuali modifiche potrebbero richiedere molto tempo. L’utilizzo di DIV + CSS comporta una conoscenza profonda dell’HTML e dei CSS, il layout risulta più pulito e tecnicamente servono meno righe di codice per ottenere il medesimo risultato utilizzando le tabelle. Il problema principale risulta la compatibilità con i vari browser: infatti, alcuni parametri dei CSS possono essere interpretati in modo differente dai diversi browser con conseguente layout modificato.

L’utente, comunque, non si accorgerà se un sito è stato fatto utilizzando le tabelle o i DIV + CSS. Stabilire quale sia l’approccio migliore non è facile, noi possiamo dirvi che:

• utilizzare i DIV + CSS consente di implementare pagine con minor quantità di codice ingombrante e i CSS possono essere archiviati in file esterni. Questo garantirebbe un caricamento delle pagine web molto più rapido;
• se si è scelto di adottare un design specifico e dettagliato sarà consigliabile utilizzare le tabelle, in quanto renderanno veloce il caricamenteo delle pagine web. “Per sempio Google propone tutti i suoi annunci tramite tabelle”.

Ai motori di ricerca non interessa queste differenze di codice, diciamo che l’importante è la qualità dei contenuti e i tempi di carimento delle pagine. Sicuramente un sito facilmente navigabile aiuterà gli spider nel processo di indicizzazione.

Analizziamo i pro e i contro nell’utilizzo delle tabelle e dei DIV + CSS:

1. Per le Tabelle

Pro

• minor tempo nell‘implementazione di un layout basato sulle tabelle;
• facilità di scrittura;
• pochi errori riscontrati con i browser.

Contro

• la comodità nello sviluppo viene pagata con una complessità di codice e poca chiarezza nei contenuti;
• le tabelle annidate non sono apprezzate dai motori di ricerca;
• utilizzo di molto codice e difficoltà nel gestire i tag di chiusura.

2. Per i DIV + CSS

Pro

• ottima divisione tra contenuto e impostazione grafica;
• peso ridotto delle pagine con tempi di caricamento migliori;
• possibilità di cambiare l’aspetto del sito modificando solo un file.

Contro

• uso di trucchi CSS per raggiungere alcuni effetti grafici e far sì che il layout sia cross browser (alcuni browser potrebbero intepretarli differentemente);
• conoscenza approfondita dei CSS;
• impiego di maggior tempo per implementare un layout complesso.