Tableless Layout... Si!

Qualche giorno fa mi ero ripromesso di approfittare del nuovo sviluppo di un piccolo sito che mi era capitato tra le mani per affrontare il discorso del Tableless Layout, o più semplicemente dello sviluppo della struttura di un sito attraverso i tag <div> piuttosto che con le tabelle.

Bhè, così è stato. Ieri ho ufficialmente concluso lo sviluppo e posso trarre le mie conclusioni.

Per chi come me ha sempre realizzato siti strutturati con tabelle (e ne apprezza i pregi ma ne conosce i limiti). il passaggio ai div richiede un piccolo sforzo mentale ma, se si conosce un minimo di funzionamento della logica dei fogli di stile (CSS), il passaggio è piuttosto rapido.

E' sufficiente entrare nell'ottica che ogni <div> rappresenta una porzione di pagina a se stante, alla quale possiamo assegnare peculiari proprietà di stile come lo sfondo, il carattere, l'allineamento e, cosa fondamentale per l'argomento che stiamo trattando: il posizionamento.

#header {position: relative; width: 960px;}
#menu {width: 210px; height: position: relative; float: left}
#pagebody {text-align: center; width: 750px;}

Attraverso le istruzioni CSS sopra riportate è possibile creare una pagina composta da un'intestazione, un menu a sinistra e uno spazio centrale che ospiterà il contenuto della pagina. Per quanto riguarda il codice html necessario, le istruzioni si riducono a:

<div id="header"></div>
<div id="menu"></div>
<div id="pagebody"></div>

Mi sembra evidente e quasi superfluo evidenziare l'esiguità e semplicità di questo codice rispetto a quello che sarebbe stato necessario per ottenere lo stesso risultato con le tabelle. E' evidente anche quanto sarebbe semplice per esempio invertire la posizione del menu rispetto al contenuto della pagina. Per portarlo a destra sarebbe sufficiente cambiare la proprietà float nel foglio di stile.

Considerando poi che i div possono essere nidificati proprio come le tabelle è facile immaginare come si possano ottenere layout ben più complessi.

In conclusione devo dire che è facile, con un piccolo sforzo, apprendere questo "nuovo" sistema e che i vantaggi, per la piccola esperienza che ho fin qui maturato, compensano ampiamente le 2 o 3 ore necessarie per apprendere correttamente l'uso dei <div>.

A chi fosse interessato, oltre alle solite ricerche su Google che vi forniranno tutto il materiale e il supporto di cui potreste aver bisogno, consiglio di vistare la pagina del W3C proprio dedicata a questo argomento: http://www.w3.org/2002/03/csslayout-howto.html.en

Consiglio inoltre di procurarsi un buon editor HTML che supporti il completamento automatico anche delle voci CSS come Microsoft Visual Web Developer Express (gratuito) o il nuovo Microsoft Expression Web