Imparare a scrivere i layout CSS può essere complicato, specialmente se si ha familiarità con l'utilizzo delle tabelle per creare fantasiosi layout di pagine web. Ma mentre HTML5 consente tabelle per il layout, non è una buona idea.
Le tabelle non sono accessibili
Proprio come i motori di ricerca, la maggior parte degli screen reader legge le pagine Web nell'ordine in cui sono visualizzate nell'HTML e le tabelle possono essere molto difficili da analizzare per gli screen reader. Questo perché il contenuto in un layout di tabella, sebbene lineare, non ha sempre senso quando viene letto da sinistra a destra e dall'alto verso il basso. Inoltre, con le tabelle nidificate e le varie estensioni sulle celle della tabella è possibile rendere la pagina molto difficile da capire.
Questo è il motivo per cui la specifica HTML5 raccomanda contro le tabelle per il layout e perché HTML 4.01 non lo consente. Le pagine Web accessibili consentono a più persone di usarle e sono il marchio di un designer professionista.
Con i CSS, puoi definire una sezione come appartenente al lato sinistro della pagina ma posizionala per ultima nell'HTML. Quindi, sia i lettori di schermo che i motori di ricerca leggeranno prima le parti importanti (il contenuto) e le parti meno importanti (la navigazione).
Le tabelle sono difficili
Anche se crei un tavolo con un editor web, le tue pagine web saranno comunque molto complicate e difficili da mantenere. Ad eccezione dei disegni di pagine Web più semplici, la maggior parte delle tabelle di layout richiede l'uso di molti attributi e di tabelle nidificate.
Costruire il tavolo può sembrare facile mentre lo fai, ma una volta fatto è necessario mantenerlo. A sei mesi di distanza potrebbe non essere facile ricordare perché hai annidato le tabelle o quante celle erano in una fila e così via. Per non parlare, se si gestiscono le pagine Web come membri di un team, è necessario spiegare a tutti coloro che sono coinvolti come funzionano le tabelle o si aspettano che impieghino più tempo quando devono apportare modifiche.
Anche i CSS possono essere complicati, ma mantiene la presentazione separata dall'HTML e rende molto più facile mantenere a lungo termine. Inoltre, con il layout CSS puoi scrivere un file CSS e modellare tutte le tue pagine in questo modo. Poi, quando vuoi cambiare il layout del tuo sito, devi semplicemente cambiare un file CSS, e l'intero sito cambia: non passa più una pagina alla volta per aggiornare le tabelle per aggiornare il layout.
Le tabelle sono inflessibili
Sebbene sia possibile creare layout di tabella con larghezze percentuali, sono spesso più lenti da caricare e possono cambiare drasticamente l'aspetto del layout. Ma se usi le larghezze specificate per le tue tabelle, finirai con un layout molto rigido che non sembrerà bello su monitor di dimensioni diverse dalla tua.
Creare layout flessibili che abbiano un bell'aspetto su molti monitor, browser e risoluzioni è relativamente facile. Infatti, con le query multimediali CSS, è possibile creare disegni separati per schermi di dimensioni diverse.
Le tabelle nidificate caricano più lentamente del CSS per lo stesso disegno
Il modo più comune per creare layout fantasiosi con le tabelle è quello di "annidare" le tabelle. Ciò significa che una (o più) tabella è posizionata all'interno di un'altra. Più tabelle sono nidificate, più tempo sarà necessario per il browser Web per il rendering della pagina.
Nella maggior parte dei casi, un layout di tabella utilizza più caratteri da creare rispetto a un design CSS. E meno caratteri significano meno per il download.
Le tabelle possono danneggiare l'ottimizzazione del motore di ricerca
Il layout di tabella più comune creato ha una barra di navigazione sul lato sinistro della pagina e il contenuto principale sulla destra. Quando si usano le tabelle, questo (in genere) richiede che il primo contenuto visualizzato nell'HTML sia la barra di navigazione a sinistra. I motori di ricerca classificano le pagine in base al contenuto e molti motori determinano che il contenuto visualizzato nella parte superiore della pagina è più importante di altri contenuti. Quindi, una pagina con la navigazione a sinistra per prima, sembrerà avere un contenuto meno importante della navigazione.
Usando i CSS, puoi inserire i contenuti importanti prima nel tuo HTML e poi usare i CSS per determinare dove dovrebbe essere collocato nel design. Ciò significa che i motori di ricerca vedranno prima i contenuti importanti, anche se il design lo colloca più in basso nella pagina.
Le tabelle non si stampano sempre bene
Molti progetti di tabelle non vengono stampati correttamente perché sono troppo larghi per la stampante. Quindi, per adattarli, i browser interromperanno le tabelle e stamperanno le sezioni sottostanti dando luogo a pagine molto sconnesse. A volte finisci con pagine che sembrano a posto, ma manca tutto il lato destro. Altre pagine stamperanno sezioni su vari fogli.
Con i CSS è possibile creare un foglio di stile separato solo per stampare la pagina.
Le tabelle per il layout non sono valide in HTML 4.01
La specifica HTML 4 afferma: "Le tabelle non devono essere utilizzate esclusivamente come un mezzo per impaginare il contenuto del documento in quanto ciò potrebbe presentare problemi durante il rendering su supporti non visivi."
Quindi, se vuoi scrivere HTML 4.01 valido, non puoi usare le tabelle per il layout. Dovresti utilizzare solo le tabelle per i dati tabulari, e i dati tabulari generalmente appaiono come qualcosa che potresti visualizzare in un foglio di calcolo o possibilmente in un database.
Tuttavia, HTML5 ha cambiato le regole e ora le tabelle per il layout, sebbene non raccomandate, ora sono considerate HTML valido. La specifica HTML5 afferma: "Le tabelle non dovrebbero essere utilizzate come aiuti per il layout." Questo perché le tabelle per il layout sono difficili da distinguere dagli screen reader, come accennato in precedenza.
L'uso di CSS per posizionare e impaginare le tue pagine è l'unico modo HTML 4.01 valido per ottenere i progetti che hai usato per utilizzare le tabelle da creare e HTML5 raccomanda vivamente anche questo metodo.
Le tabelle per il layout possono influenzare le tue prospettive di lavoro
Man mano che sempre più nuovi designer apprendono HTML e CSS, le tue abilità nel costruire layout di tabelle saranno sempre meno richieste. Sì, è vero che i clienti in genere non ti dicono esattamente la tecnologia che dovresti usare per costruire le loro pagine web, ma richiedono cose come:
- Pagine web accessibili: i progetti che possono essere visualizzati dagli screen reader sono richiesti da molti paesi e le aziende considerano l'accessibilità sempre più importante ogni giorno.
- Pagine web manutenibili: disegni che possono portare con sé anche se non li manterrai in futuro.
- Disegni flessibili: progetti che funzionano su molti browser, risoluzioni e dispositivi.
- Pagine di download veloce: la velocità sta diventando sempre più importante, anche per il SEO.
- Disegni stampabili: pagine che vengono stampate senza script speciali o pagine aggiuntive.
Se non puoi consegnare ciò che i clienti chiedono, smetteranno di venire da te per progetti - periodo. Puoi davvero permetterti di far soffrire il tuo business perché non sei disposto ad imparare e ad incorporare una tecnica che è stata in uso dalla fine degli anni '90?
The Moral: impara a usare i CSS
I CSS possono essere difficili da imparare, ma ogni cosa che valga la pena vale lo sforzo. Non mantenere le tue abilità stagnanti. Impara i CSS e costruisci le tue pagine web nel modo in cui dovevano essere costruite - con i CSS per il layout.
