Newsgroup: it.comp.www.html
Titolo: css vs tables

Ok, il css è potente etc, però ha una grossa, anzi, grossissima
limitazione rispetto ai tables, ossia il dimensionamento dinamico
verticale.
Questo, a mio parere, è una grossissima limitazione che costringe il
grafico a NON sviluppare pagine di un certo genere o perlomeno a NON
permettere al coder di svilupparla nel modo in cui vorrebbe
svilupparla.
Faccio un esempio? Aprite questa immagine e cominciate a leggere:
http://incarta.altervista.org/suddivisione.gif
Il testo messo in una sorta di cornice grafica che voglia sfruttare il
ridimensionamento sia orizzontale (facilmente ottenibile) che
verticale, con un immagine nel background: semplicemente non si può.
Ma non è solo questo, il problema, bensì questa mancata possibilità di
avere un elemento che si estenda fino ai piedi della pagina o, meglio
ancora, la mancata possibilità di avere diversi elementi che siano tra
di loro legati sul piano Y e che quindi siano controllabili
contemporaneamente (concetto forse difficile da fare capire senza
portare esempi) non permette di avere nemmeno un ridimensionamento
orizzontale. 
Mi spiego: 
avendo una cornice grafica che deve allargarsi su X e Y, avrò quattro
angoli più i quattro lati in immagini separate, per un totale di 8
immagini diverse.
Per poter allargare su X dinamicamente, ho bisogno di 3 div con tre bg
diversi: uno con l'angolo sx, col lato superiore e l'angolo dx.
A questi 3 div ne devono seguire altri 3: lato sx, contenuto, lato dx.
Infine chiudo con altri 3 div: angolo basso sx, lato inferiore e
angolo basso dx.
Già tutto questo rende il codice pieno di div, molto simile ad una
table.
Ora, in teoria dovrei far si che i 3 div di mezzo siano collegati tra
loro, di modo che, all'aumentare del testo, i due div laterali si
allunghino a loro volta, ma questo non è possibile, giusto? Allora
dovrei far si che vadano fino ad una certa distanza, facciamo anche il
100% dell'altezza della pagina. Ma anche questo non è possibile.
Perciò devo abbandonare il ridimensionamento dinamico verticale.
A questo punto però cosa accade? Non potendo svilupparlo in verticale,
ripiego sull'allargamento orizzontale. La struttura di 9 div rimane
tale e quindi nulla da invidiare ad un table. Quale il vantaggio, in
questo contesto? A parità di struttura, ottengo solo un effetto (rid.
orizzontale), mentre con un table ne otterrei due (verticale e
orizzontale).
Bye
geniolatenio


Ero un fortissimo sostenitore dell'anti-table... ma mi sono ricreduto: non è 
ancora possibile sfruttare a pieno i css e, nella maggior parte di template 
complessi, le tabelle sono indispensabili, a meno di usare un crack del css 
stesso per accontentare malfunzionamenti di alcuni browser.
La colpa è in gran parte di IE che non accetta semplici istruzioni che un pò 
potrebbero semplificare (es: min-width), e un pò anche del W3C che depreca 
tag molto comodi senza dare degni sostituti (tag center per esempio) e che 
dà delle direttive a volte veramente idiote! (che IE non segue, ma così 
peggiora la situazione).
Siamo ancora in una fase di transizione che speravo finisse con IE7, ma a 
quanto sento dai commenti, siamo ancora lontani. Bene o male i danni per una 
male interpretazione del browser di tabelle, non scombinano "troppo" una 
pagina... ma una mal interpretazione da parte del browser di un css avanzato 
(con uso di float, posizioni relative, margini negativi ecc ecc), combina 
guai seri tanto da rendere inutilizzabile l'intera pagina.
Per ora mischio i due metodi e amen: uso css quando posso, altrimenti uso 
tabelle.
usare css per fare una pagina che "riempie" tutto lo schermo dinamicamente, 
per esempio, è impossibile accontentando IE, Opera, FF e W3C.
ciao,
Luca(riello)
PS: ho fatto un post "min-width, IE e validazione" che affronta un altro 
problema e che a quanto pare nessuno ha risolto. 

 Luca(riello)
Il tuo post mi suona strano, poiche' i problemi da te enunciati, li ho 
affrontati solo nella fase iniziale di apprendimento, ma ora non ho 
nessun problema a fare a meno delle tabelle, e ti giuro che non le 
rimpiango minimamente.
Mi sa che tutto sta nella singola competenza di ognuno.
Ciao

 minimamente.
Bé, non dò tutti i torti a Luca(riello) per quanto riguarda le difficoltà di 
realizzazione di layout in cui è importante che le colonne (entrambe con 
sfondo colorato) siano della stessa altezza, che una sia di dimensione fissa 
e quella del contenuto ridimensionabile (e che i contenuti non caschino giù 
sotto il menu di sinistra stringendo la finestra), e che il tutto sia 
compatibile con tutti i browser, ecc...
Nello. 


Indubbiamente. Ma in giro per la rete trovo "esperti" in css che si 
rifugiano nel css hack... qualcosa vorrà dire?
Ciao,
Luca(riello) 

Mi sa che tutto sta nella singola competenza di ognuno.
Senza dubbio.. perň sarei curioso di sapere come hai risolto il
problema dell'avere una pagina che dinamicamente ridimensioni degli
elementi verticali e orizzontali contemporaneamente affinchč si
adattino alle dimensioni di un contenuto.. esattamente come ho
descritto nel post iniziale e come facevano le tabelle. Non mi
interessa la soluzione (altrimenti verrei tacciato come quello che non
si sbatte per trovare le soluzioni), ma solo sapere se ce l'hai fatta
e se hai un sito dove questo si possa vedere (cosě posso impararlo e
copiartelo :)
Oppure hai eliminato alcuni elementi come il suddetto che, da quel che
mi risulta, non si possono ottenere se non con una tabella? Perchč
questo č un compromesso, non la soluzione al problema..
Bye
geniolatenio

 questo è un compromesso, non la soluzione al problema..
Che si debba scendere a compromessi, è ovvio. Se è per questo, i css aprono
possibilità che con le table ti sogni.
Il punto è capire quali sono le cose più importanti. Se ritieni importante
la leggerezza del codice, la velocità operativa, il rispetto della
semantica a vantaggio della riusabilità del markup e, in generale, il
rispetto del criterio che chiede una netta separazione fra contenuto,
presentazione e comportamento (xhtml, css, ecmascript) di una pagina web,
allora non c'è ragionamento che tenga: non usi le tabelle per fare il
layout.
Se invece la tua priorità è incapricciarti su un layout che deve essere
proprio così (perché sei un grande artista e la tua idea grafica non può
essere modificata neanche di una virgola, costi quel che costi, anche se
molti utenti non potranno fruire dei contenuti, anche se il codice sarà
sporco e pesante, anche se dovrai sudare per modificare anche una piccola
cosa nel sito), e guarda caso il tuo layout è proprio uno di quei pochi che
senza tabelle proprio non si può fare... beh, allora è chiaro che userai le
tabelle.
-- 
Nando [?]
Apostolo della Prova

 questo è un compromesso, non la soluzione al problema..
Cioè, hai degli elementi che possono allargarsi ed allungarsi a piacimento ?
Ho seri dubbi tu voglio realmente quello che dici (se ho capito bene), non c'è
nulla di più brutto e inusabile di un sito che cresce orizzontalmente e ti
costringe ad usare le scrollbar del browser per navigare tra i contenuti, a
meno che non sia un design specificatamente pensato per svilupparsi in
orizzontale (e _non_ in verticale) come quelli presenti su zengarden.
Tenta di essere più preciso, altrimenti è dura.
Se il problema è il ridimensionamento dei caratteri allora ti basta usare em
e percentuali piuttosto che px, se il problema sono le colonne che si
azzoppano perchè una è più lunga dell'altra allora la tecnica che cerchi è
quella delle "faux column", che trovi su ALA, ma sono entrambe talmente
conosciute che dubito il problema sia questo.
Magari fammi vedere un sito con il risultato che vuoi, anche con il layout a
tabelle.
  ngw

 rifugiano nel css hack... qualcosa vorrà dire?
Si, che alcuni browser sono irrimediabilmente fallati.
Ma meglio isolare il problema e applicare i soliti stranoti 4 hack che
tagliare la testa al toro e usarne uno unico, per tutto il sito (perchè questo
è l'utilizzo delle tabelle per il layout).
  ngw

 compatibile con tutti i browser, ecc...
http://www.alistapart.com/articles/fauxcolumns/
  ngw

meno che non sia un design specificatamente pensato per svilupparsi in
no.. intendo elementi che, col ridimensionamento della finestra del
browser, si allarghino in orizzontale e che vadano fino in fondo alla
pagina in verticale.
Per quanto riguarda il faux columns, è un trucco che si può applicare
ma NON se vuoi contemporaneamente il ridimensionamento orizzontale: se
le false colonne sono immagini, queste rimarranno ferme quando uno
farà il ridimensionamento della pagina. Guarda cosa intendo
http://incarta.altervista.org/suddivisione.gif
 (sono 9 div con centro
alto, centro basso, centro dx e centro sx che si dovrebbero allungare
o accorciare in base ai contenuti e alla dimensione della finestra).
Il problema dell'allargamento verticale invece è nato quando non
volevo usare un'immagine come bground ma un div che, con due righe di
codice, mi si spostava dinamicamente in base alla pagina su cui si
trovava e, soprattutto, che si allargasse con l'eventuale
ridimensionamento del carattere.
Nel disegno su 
http://incarta.altervista.org/ll.gif
 puoi vedere cosa
intendo.
Le voci "menu 1" etc hanno tutti dimensione diversa tra di loro,
perciò, in teoria, avrei dovuto usare una gif con la linea rossa
diversa per ogni pagina. Il problema nasce nel momento in cui un
utente aumenta o diminuisce le dimensioni del carattere, poichè il
carattere del menù si allargherebbe. La parte rossa dietro alle voci
"menu" è codice, quindi si allarga anch'essa, mentre lo sfondo rimane
della stessa dimensione perchè è gif.
Se il div 1 lo potessi portare fino in fondo, il problema non ci
sarebbe, perchè anch'esso si allargherebbe col resize del testo.
'ccidenti, spero d'essere riuscito a spiegarmi, non è facile :)
Bye
geniolatenio

 è l'utilizzo delle tabelle per il layout).
Non so... Sono contrario agli hack perché versioni successive di diversi 
browser potrebbero interpretare un hack in un modo strano. O stesso browser 
in cui difficilmente potrei testare la pagina (per esempio browser per mac).
ciao,
Luca(riello)