Proprio oggi cercavo una piccola guida da mostrare ad un mio collega su come creare layout grafici simili a tabelle ma con il solo utilizzo di elementi div. La persona a cui dovevo far leggere qualcosina su questo argomento non se la cava con l’inglese e pur troppo in rete la maggior parte delle informazioni relative a questo argomento sono proprio in questa lingua. Di seguito vorrei spiegare molto semplicemente (spero di farcela) come ottenere un layout di questo tipo. L’esempio che andrò a descrivere permette la creazione di una tabella a 4 colonne.
Prima di tutto dobbiamo progettare una serie di stili css che ci permettano di ottenere graficamente un aspetto tabellare per gli elementi divisori. Salviamo un nuovo foglio di stile con questo codice:
.tabella,
.riga,
.colonna { margin: 0; padding: 0; border: 0}
.tabella { display: table; width: 100%}
.riga { clear: both; display: block;
display: table-row; width: 100%}
.colonna { float: left; width: 25%; display: table-cell}
Penso sia ovvio presuppore che per poter capire bene cosa sia scritto in queste poche righe è necessario avere una conoscenza di base relativa ai CSS (Cascading Style Sheets). Per poter ottenere un effetto tabella ho semplicemente costruito degli stili in cui ho fatto particolare attenzione all’impostazione della proprieta display. Questa, oltre agli attributi che generalmente siamo abituati ad utilizzare ne contiene anche altri molto particolari:
- table: permette di visualizzare un elemento come un contenitore di tipo tabella.
- table-row: permette di visualizzare un elemento
come un contenitore di tipo riga (quindi, per logica, và inserito all’interno di un controllo che emuli una tabella) - table-cell: permette di visualizzare un elemento come contenitore di tipo cella (quindi, per logica anche qui, và inserito all’interno di un controllo che emuli una riga)
Vorrei ricordare che sono presenti anche altri attributi, ma ho pensato di elencare quelli più interessanti e che servono per raggiungere l’obiettivo preposto. Ora non ci rimane altro che richiamare il foglio css che abbiamo progettato all’interno della nostra pagina e qui disegnare una tabella a 4 colonne utilizzando semplicemente div, di seguito l’esempio in base al css:
Colonna 1Colonna 2Colonna 3Colonna 4
Visualizzando un anteprima sul browser noterete come siano state create perfettamente 4 colonne con larghezza uguale (espressa in percentuale in base alla risoluzione dello schermo). Questo esempio vuole essere un piccolo aiuto perchè i layout realizzabili con questa tecnica sono infiniti! Pensiamo allo sviluppo di pagine che prevedono la compilazione di un numero elevato di campi, la scelta nel 99,9% dei casi ricade sempre sull’utilizzo delle tabelle, il chè ovviamente non è una buona idea se lo standard a cui vogliamo attenerci e W3C! Progettare un layout a div in questo modo rappresenta un’ottima soluzione, ma esistono anche altre strade in cui è richiesto un pò di studio inizialmente, ma successivamente si rivelano una comodità immensa!
Commenti recenti