Le prime pagine Web su Internet contenuti poco più di testo e collegamenti ipertestuali. Come è cresciuta la popolarità di Internet, tuttavia, Web design superò gli attuali standard HTML e le funzionalità del browser disponibili. Progettisti serviva un modo per creare complicati progetti Web che Internet Explorer e Netscape browser visualizzare allo stesso modo. Questa esigenza ha uscito da design basato su tabella, in cui progettisti utilizzati tag di tabella HTML - significato per la visualizzazione di dati tabulari-- per creare la struttura per la progettazione di un sito. Dal 2002 circa, tuttavia, i professionisti del Web ha cominciato considerando layout basati su tabella come una tecnica di codifica povera.

Priorità bassa

All'inizio del 2001, la pubblicazione online influente A List Apart ha pubblicato un articolo intitolato "Da Hacks per CSS Layout di tabella," che ha suscitato un acceso dibattito tra Web Designer. Molti progettisti e programmatori erano riluttanti a smettere di usare tried-and-true basato su tabella disegni. Nel 2001, il supporto dei browser per i CSS (Cascading Style Sheets) era limitato. Internet Explorer 6 è stato rilasciato lo stesso anno e aveva il CSS migliore supporto per i suoi tempi, ma che supporto incluso molti bug. Il più infame bug IE6 - il "bug di casella modello" e "baco del doppio margine" - hanno sconvolto il layout basati su CSS altrimenti ben codificato. Per questi motivi, ci sono voluti alcuni anni per i progettisti di goccia basato su tabella codifica per la codifica basata su CSS.

Come tabella layout lavoro

Layout di tabella utilizzare tag di tabella HTML per creare una struttura per la grafica e i contenuti del sito. L'esempio classico è di un layout a tre colonne con intestazione e piè di pagina. In un layout basato su tabella, designer utilizzare tag HTML per creare una tabella con una cella di due-colonna a livello delle righe superiore e inferiore. Riga centrale della tabella contiene tre celle, e ogni cellula è una colonna per il sito. Attributi che sono non più utilizzati in HTML 4 e fino, permetteva ai programmatori di controllo spaziatura, imbottitura, larghezza e altezza delle celle della tabella.

Come funzionano i layout CSS

Layout di controllata da CSS correttamente separare il contenuto dalla presentazione. Questo significa che il file HTML contiene i contenuti - testi, immagini, ecc...--mentre il CSS definisce dove tale contenuto viene visualizzato nella pagina. Progettisti possono collegare un file CSS a ogni pagina del sito e, di conseguenza, essere in grado di cambiare design dell'intero sito mediante la modifica di un file CSS. La sostituzione standard CSS per il tag di tabella HTML 4 e XHTML è il tag < div >, anche se HTML 5 introduce nuove < sezione > e < a parte > Tag che portano più significato nei loro nomi rispetto < div >. Il file CSS utilizza la classe o l'attributo ID di tag specifici < div > di destinazione.

Perché il layout di tabella sono male

Layout basato su tabella richiedono modifiche a ogni pagina del sito ogni volta che viene modificata la struttura. Anche se un layout basato su tabella utilizza alcuni CSS per lo stile, per modificare la struttura del layout, sono necessarie modifiche per ogni pagina. Quando si aggiorna un layout basato su tabella, trovare il contenuto da modificare è più difficile nel labirinto-come codice di tabelle nidificate all'interno di tabelle. Web designer potrebbe addebitare extra per il tempo che serve per modificare i layout basati su tabella, o si suggerirà di rottamazione del sito corrente complessivamente. Un altro risultato di layout basati su tabella è gigantesca codice. Grandi siti Web con traffico pesante non può permettersi codice gonfio a causa dei costi di larghezza di banda.