Layout tableless a 3 e a 2 colonne

[Nunkij]

Salve a tutti,
ho due elenci di dati dinamici che vengono da un database. Ho la necessità d tabularli il primo (superiore) in 3 colonne ed il secondo (inferiore) in 2.

Mi date un tutorial per fare una cosa del genere?

[fcaldera]

tra i link utili in evidenza ci sono indicazioni per layout a 2 e 3 colonne

[Nunkij]

Sì ma quelli sono relativi a dei layout per l'intera pagina. Io vorrei rendere l'effetto di due tabelle una sotto l'altra (nello stesso div per intenderci) una a 2 e l'altra a 3 colonne. Se separo le due parti funzionano, ma è la loro combinazione che mi disfa la pagina. Spero d essere stato più chiaro, grazie a chi mi dà una mano!

[fcaldera]

prova allora ad usare l'attributo colspan per le celle

<tr>
   <td colspan="3"> cella 1/2</td> 
   <td colspan="3"> cella 2/2</td>
</tr>
<tr>
   <td colspan="2"> cella 1/3</td> 
   <td colspan="2"> cella 2/3</td>
   <td colspan="2"> cella 3/3</td>
</tr>

[Nunkij]

ma io volevo evitare di usare le tabelle altrimenti il problema è risolto. I due oggetti devono essere distinti. Uno cn una struttura a 3 colonne e l'altro a 2.

[fcaldera]

se sono dati tabellari non c'è nulla di male ad usare le tabelle

ad ogni modo se non vuoi usarle puoi usare una struttura del tipo

<div id="dati">
   <ul class="col2">[*].......[*].......[*].......[*].......[/list]
   <ul class="col3">[*].......[*].......[*].......[*].......[*].......[*].......[*].......[*].......[/list]
</div>

css

   #dati { width: 600px;}
   #dati ul { width : 600px; margin: 0; padding: 0; list-style-type: none; height: auto; oveflow: hidden;}
   #dati li { float: left; display: inline; border: 1px #9a9a9a solid; }
   .col2 li { width: 298px; }
   .col3 li { width: 198px; }

Ciao

[Nunkij]

Allora la parte inferiore è un form a due colonne. La parte superiore è un elenco di fotografie disposte su 3 colonne. Non penso che si possano usare le tabelle, il nuovo web è parecchio schizzinoso su queste cose! :P

[Mich_]

Non e` sbagliato formattare i form con le tabelle, ma sarebbe meglio usare i tag corretti: <label for...> per le descrizioni e i tag <input> (o altri tag dei form) per i campi. Le label possono essere rese block e con dimensione definita, idem per gli <input>.

Per le immagini, dipende se c'e` relazione di riga e di colonna.
Altrimenti andrebbero usati i float, oppure puoi dare dimensioni alle immagini (dopo averle rese block) oppure ai contenitori delle immagini.

Puoi mettere tutto nello stesso <div>, ma le due sezioni devono per forza essere racchiuse ciascuna in un suo blocco: in fondo sono sottosezioni distinte.

[Nunkij]

La storia dei form con le label l'ho scoperta da poco e sinceramente mi piace tanto, è una soluzione estremamente elegante.
La domanda (un pò off-topic ma intanto la faccio) è:
Come gestisco una label per un campo radio o per una checkbox? A quale delle opzioni la faccio riferire?

Cambiare il display block per le immagini (o per qualsiasi elemento inline) non è una soluzione poco carina?

Per le mie immagini non c'è relazione riga colonna e quindi non dovrei usare le tabelle.
Attendo chiarimenti e grazie per avermi risposto

Puoi mettere tutto nello stesso <div>, ma le due sezioni devono per forza essere racchiuse ciascuna in un suo blocco: in fondo sono sottosezioni distinte.

ma infatti era quello che volevo fare solo che non mi funziona!
(rileggendo capisco di aver spiegato male nei messaggi precedenti, chiedo scusa)

[Mich_]

Originariamente inviato da Nunkij
Come gestisco una label per un campo radio o per una checkbox? A quale delle opzioni la faccio riferire?

Dipende.
Non si puo` rispondere in linea generale.
A parte che il for in una label non e` obbligatorio, dipende da come sono messi i vari radio.
Chiaramente se ogni radio ha un label il problema non si pone.
Se invece i radio sono messi in orizzontale, uno vicino all'altro e non ha senso assegnare una label a ciascuno (magari perche` formano una matrice), puoi assegnare la label al primo.

Cambiare il display block per le immagini (o per qualsiasi elemento inline) non è una soluzione poco carina?

No, e` la soluzione corretta per affiancarle (far occupare un proprio posto a ciascuna).
Comunque se le immagini sono flottate sono di default di tipo blocco, per cui la domanda non ha senso.

Per le mie immagini non c'è relazione riga colonna e quindi non dovrei usare le tabelle

Esatto.

ma infatti era quello che volevo fare solo che non mi funziona!

Avrai sbagliato qualcosa ... Comunque ricorda che se imposti il codice HTML in modo corretto anche dal punto di vista semantico, sistemare i CSS diventa molto piu` semplice.