Toh, di nuovo layout con le tabelle…
Venerdì 29 Febbraio 2008 - 07:47
di Cesare Lamanna
Non proprio nel senso classico, non con codice HTML infarcito di <tr> e <td> annidati, ma secondo Kevin Yank, che ci fa un post sul blog di SitePoint, il binomio layout/tabelle potrebbe avere una seconda vita grazie ai CSS.
Come sapete, la specifica prevede una serie di proprietà per la gestione delle tabelle e altri valori legati alla tabelle per la proprietà display. Proprio usando una combinazione di queste proprietà Yank ha realizzato un layout a tre colonne a suo dire robusto, che non necessita di hack, che non usa float e posizionamenti, che non ha il problema dell’altezza delle colonne, etc. Il tutto grazie al fatto che, applicando quelle proprietà a dei normalissimi div, questi si comportano di fatto come se fossero… celle di una tabella.
L’esempio l’ho testato con successo su Safari 3 e Opera 9.10, e devo dire che rende alla perfezione, anche ingrandendo di molto il testo regge benissimo. Su Firefox 3 non va; per IE7 Yank ha predisposto a titolo di esempio un CSS alternativo con i commenti condizionali.
Inutile dire che al momento è una tecnica improponibile visto lo scarso supporto, ma l’autore afferma che in futuro potrebbe essere un’alternativa valida ai metodi attuali.
Per il codice, facile da comprendere, vi rimando ancora una volta al post e all’esempio.
Commenti
1
Ho solo un dubbio… con questo sistema non mi pare sia possibile decidere l’ordine delle colonne. Personalmente, ultimamente ho eliminato i float e uso posizionamenti assoluti.
# - postato da Riccardo - 29 Febbraio 2008 - 08:31
2
Come idea non è da scartare ma sicuramente vanno analizzati i vantaggi rispetto ad una normale tecnica con float e posizionamenti assoluti sia in un rapporto costi(tempi)-effettiva utilità.
3
La prima volta che ho aperto la pagina vedevo due colonne affiancate e la terza stava sotto, facendo il refresh andava tutto ok :-|
# - postato da Alessio Michelini - 29 Febbraio 2008 - 09:36
4
@ Alessio
Hai ragione!! io pensavo fosse già corretto alla prima visualizzazione e mi chiedevo “il perchè delle 3 colonne” quando ce n’erano solo 2! :D
5
Prevedo caterva di commenti..hi hi..
6
mah… è vero che ogni problema ha una sua soluzione… però ritornare di nuovo alle tabelle mi sembra anacronistico… io mi tengo i div, float, absolute ecc
7
Ma infatti non ci sono tabelle, è solo che sfruttando alcune proprietà css si possono usare i div come se fosse una tabella
# - postato da Alessio Michelini - 29 Febbraio 2008 - 15:58
8
Su Firefox 3 non va? Su IE7 ha bisogno di commenti condizionali? E dove sta il valore aggiunto della soluzione, allora? Forse sono stanco, ma non lo vedo…
# - postato da paperogiallo - 29 Febbraio 2008 - 18:27
9
penso che la robustezza sia una delle cose da considerare maggiormente, nei prossimi mesi questa tecnica si dimostrerà valida (non credo)?
10
Mah, ognuno usa il suo metodo.. se lui è contento così, chi siamo noi per criticarlo :P
11
Come idea non è male, però visto lo scarso supporto dei browsers, non vedo perchè lasciare la via vecchia per la nuova ;)
Sarà forse meno “robusto” un layout basato su div classici con float, ma è comunque gestibile. Se poi si utilizza assieme a posizionamenti assoluti, il tutto poi funziona bene.
Inoltre, oramai gli hack per la formattazione classica sono ben noti. Vale proprio la pena di pensare a questa nuova tecnica?# - postato da Aimachines - 03 Marzo 2008 - 01:37
12
Ah, le tabelle… le chiudi fuori dalla porta e rientrano dalla finestra!
E’ vero! Ste proprietà display e table-layout è da un po’ che girano… O meglio, che girano come W3C REC ma non girano su certi browser, IE in pole. Ricordo che mi avrebbero risolto una marea di problemi con un’applicazione web qualche anno fa, ma solo Firefox se le filava… (A proposito! A me su FF 3b3 per Mac l’esempio funge… A voi no?)
Soluzione bella e snella, se fosse più ampiamente supportata.
Staremo a vedere…
Dopo tutto Molly sta facendo un grande lavoro e forse persino IE8 le supporterà.
Speriamo…
13
Non ci vedo nulla di così eclatante, tra l’altro per IE7 bisogna ricorrere come sempre ai commenti condizionali e su FF3 non funziona.
Se è solo una tecnica per il futuro, penso che con i css3 ne avremo altre decine…