L'elemento "HTML Table" è progettato per presentare i dati in righe e colonne. Alcuni web designer anche usarlo per layout di pagina, ma è poco adatto a questa funzione. Utilizzando gli elementi DIV e CSS per formattare li è un modo più semplice, più flessibile per creare un layout di pagina che avrebbe richiesto funzione tabella nei primi giorni di HTML. Un layout basato su DIV verrà visualizzato non appena si comincia a scaricare, mentre un layout di tabella non verranno visualizzate fino a quando il download è completo.

Istruzioni

1

Fare uno schizzo di blocco del layout della pagina che si desidera. Ad esempio, si potrebbe desiderare una barra di intestazione orizzontale, una barra di navigazione orizzontale più ristretta e una barra laterale verticale oltre a un'area di contenuto principale. Decidere esattamente come si vuole queste sezioni disposte. Ogni blocco rappresenta un DIV; è possibile utilizzare invisibile "contenitore" DIVs per mantenere le cose disposte correttamente.

2

Assegnare ogni sezione un nome univoco, che diventerà suo attributo "id". Se due o più sezioni condivideranno lo stesso formato, creare un altro nome univoco per loro; Questo diventerà l'attributo "class".

3

Creare un nuovo file di layout. A seconda delle esigenze, questo può utilizzare codice statico (HTML o XHTML) o dinamici (PHP o ASP). Aggiungere tag DIV per il corpo, utilizzando i nomi di id e class dal passaggio 1, in ordine dall'alto verso il basso. Eventualmente del nido div contenitore div.

4

Creare un foglio di stile con l'estensione. CSS e link ad esso dal vostro file di layout. Creare una sezione per ogni layout DIV. uso nomi id e class, con il selettore id (#) o il selettore di classe (..) all'inizio di ogni.

5

Aggiungere gli attributi di layout per ogni sezione id e class. Questi possono includere imbottitura, spaziatura, confine, posizione, float, margine, altezza e larghezza.

6

Verificare il layout in molti browser e modificare come necessario.

Consigli & Avvertenze

• Se si dispone già di un file di layout utilizzando la funzione di tabella per il layout, è meglio per iniziare un nuovo file di layout da zero piuttosto che cercare di modificare il file esistente. Utilizzare il vecchio file per riferimento e copiare e incollare il contenuto come necessario. È solitamente possibile riciclare il vecchio foglio di stile.
• Utilizzare liberalmente commenti in modo da non dimenticare che una sezione è per o perdersi cercando di navigare il vostro codice man mano che cresce. Rientranze e interruzioni di riga nel codice anche aiutano a mantenere il codice più facile da usare.
• L'attributo "float" non funziona esattamente allo stesso modo come allineamento destro e sinistro in una tabella. Se il layout è rotto, rivedere il vostro riferimento di CSS per vedere che se è necessario cambiare il modo in cui si utilizza "galleggiante".
• Diversi browser può visualizzare il layout in modo diverso. Un layout che è bello in Firefox può essere rotto in Internet Explorer (o viceversa). Verificare il layout in più browser.