Imparare a scrivere CSS i layout possono essere complicati, soprattutto se hai familiarità con l'uso delle tabelle per creare fantasiosi layout di pagine web. Ma mentre HTML5 consente tabelle per il layout, non è una buona idea.
I tavoli non sono accessibili
Simile a motori di ricerca, la maggior parte degli screen reader legge le pagine Web nell'ordine in cui vengono visualizzate nell'HTML e le tabelle possono essere molto difficili da analizzare per gli screen reader. 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 tabelle nidificate e vari intervalli sulle celle della tabella, la pagina può essere difficile da capire.
Questo è il motivo per cui Specifiche HTML5 sconsiglia tabelle per il layout e perché HTML 4.01 non lo consente. Le pagine web accessibili consentono a più persone di utilizzarle e sono il segno distintivo di un designer professionista.
Con i CSS, puoi definire una sezione come appartenente al lato sinistro della pagina ma posizionarla per ultima nell'HTML. Quindi gli screen reader e i motori di ricerca leggeranno prima le parti importanti (il contenuto) e per ultime le parti meno importanti (navigazione).
Le tabelle sono complicate
Anche se crei una tabella con un editor web, le tue pagine web saranno comunque complicate e difficili da mantenere. Fatta eccezione per i più semplici progetti di pagine Web, la maggior parte delle tabelle di layout richiedono l'uso di molti attributi e di tabelle nidificate.
Costruire la tabella può sembrare facile mentre lo fai, ma una volta fatto devi mantenerlo. Dopo sei mesi potrebbe non essere così facile ricordare perché hai nidificato le tabelle o quante celle erano in una riga e così via. Per non parlare del fatto che se gestisci pagine Web come membro del team, devi spiegare a tutte le persone coinvolte come funzionano le tabelle o aspettarti che impieghino più tempo quando devono apportare modifiche.
Anche i CSS possono essere complicati, ma mantengono la presentazione separata dal contenuto e rendono molto più facile la manutenzione a lungo termine. Inoltre, con il layout CSS puoi scrivere un file CSS e modellare tutte le tue pagine in questo modo. Quindi, quando vuoi cambiare il layout del tuo sito, devi semplicemente cambiare un file CSS e l'intero modifiche al sito: non è più necessario scorrere ogni pagina una alla volta per aggiornare le tabelle per aggiornare il disposizione.
I tavoli sono inflessibili
Sebbene sia possibile creare layout di tabella con larghezze percentuali, spesso sono più lenti da caricare e possono cambiare drasticamente l'aspetto del layout. Ma se usi larghezze specifiche per i tuoi tavoli, ti ritroverai con un layout molto rigido che non starà bene su monitor di dimensioni diverse dal tuo.
Creare layout flessibili che abbiano un bell'aspetto su molti monitor, browser e risoluzioni è relativamente facile. In effetti, con le query multimediali CSS, puoi creare design separati per schermi di dimensioni diverse.
Le tabelle danneggiano l'ottimizzazione per i motori di ricerca
Il layout creato da tabella più comune utilizza una barra di navigazione sul lato sinistro della pagina e il contenuto principale sulla destra. Quando si utilizzano le tabelle, questo approccio (generalmente) richiede che il primo contenuto visualizzato nell'HTML sia la barra di navigazione di 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 prima navigazione a sinistra, sembrerà avere contenuti meno importanti della navigazione.
Usando i CSS, puoi inserire prima il contenuto importante nel tuo HTML e poi usare i CSS per determinare dove dovrebbe essere posizionato nel design. Ciò significa che i motori di ricerca vedranno per primi il contenuto importante, anche se il design lo posiziona più in basso nella pagina.
Le tabelle non vengono sempre stampate bene
Molti modelli di tavoli non vengono stampati bene perché sono semplicemente troppo larghi per la stampante. Quindi, per adattarli, i browser tagliano le tabelle e stampano le sezioni sottostanti risultando in pagine disgiunte. A volte ti ritrovi con pagine che sembrano a posto, ma manca l'intero lato destro. Altre pagine stamperanno sezioni su vari fogli.
Con i CSS puoi creare un foglio di stile separato solo per stampare la pagina.
Le tabelle per il layout non sono valide in HTML 4.01
Il Stati della specifica HTML 4: "Le tabelle non devono essere utilizzate esclusivamente come 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 le tabelle solo per i dati tabulari e i dati tabulari generalmente sembrano qualcosa che potresti visualizzare in un foglio di calcolo o eventualmente in un database.
Tuttavia, HTML5 ha cambiato le regole e ora le tabelle per il layout, sebbene non consigliate, sono considerate HTML valido. La specifica HTML5 afferma: "Le tabelle non devono essere utilizzate come aiuti al layout". Questo perché le tabelle per il layout sono difficili da distinguere per gli screen reader, come accennato in precedenza.
L'utilizzo di CSS per posizionare e impaginare le tue pagine è l'unico modo HTML 4.01 valido per ottenere i design che hai utilizzato per creare tabelle e HTML5 consiglia vivamente anche questo metodo.