Layout con le tabelle CSS

Qualcuno tra i lettori più affezionati ricorderà  un vecchio post con cui segnalavamo questo esperimento consistente nel realizzare un layout basato sui CSS senza però float o posizionamenti, ma attraverso l’uso delle proprietà  associate alle tabelle e a certi valori speciali di display come display: table. In sintesi, un elemento a cui venga associata qualcuna di queste definizioni di stile si comporta in fase di resa come una tabella o uno dei suoi elementi costitutivi (celle, colonne, righe, etc). Una specie di uovo di Colombo con cui si ripristina tramite i CSS cià che prima si faceva con HTML.

Torna sul tema con un intervento al solito estremamente completo Andy Clarke. Il post analizza nei punti essenziali la trasformazione di un layout basato sui float nella versione basata sulle tabelle CSS. Non male vero? Il supporto è garantito per tutti i browser recenti (Firefox 2/3, Safari, Opera 9.5) meno che per IE6 e IE7 (su IE8 invece tutto bene). L’analisi del CSS nella sua parte finale rivela i punti chiave della tecnica adottata.

Clarke specifica che in certi casi specifici (la trasformazione di una lista di immagini in griglia, per esempio) l’uso di float e posizionamenti è ovviamente ancora necessario, ma che per la realizzazione della struttura portante del layout la tecnica si riveli piuttosto robusta.

Proprio l’uso di questo metodo, si segnala, è il tema portante di un nuovo e-book in preparazione per i tipi di Sitepoint, Everything You Know About CSS Is Wrong!. Uno degli autori è proprio quel Kevin Yank che aveva presentato l’esempio da cui abbiamo preso le mosse in questo post.