Elenco tableless

[Nunkij]

Salve a tutti voglio fare un elenco su due colonne in formato chiave - valore (dati presi dinamicamente da un database). Ho scritto il seguente codice:

<div>
    <div  class='vediOffertaColData'>
                <div class='vediOffertaRigaSingle'>Marca:</div>
                <div class='vediOffertaRigaSingle'>Modello:</div>
                <div class='vediOffertaRigaSingle'>Versione:</div>
                <div class='vediOffertaRigaSingle'>Prezzo:</div>
                <div class='vediOffertaRigaSingle'>Immatricolata a:</div>
                <div class='vediOffertaRigaMulti'>Descrizione:</div>                
            </div>
            <div class='vediOffertaColData'>
                <div class='vediOffertaRigaSingle'><?=$rstMarca?></div>
                <div class='vediOffertaRigaSingle'><?=$rstModello?></div>
                <div class='vediOffertaRigaSingle'><?=$rstVersione?></div>
                <div class='vediOffertaRigaSingle'><?=$rstPrezzo?> €</div>
                <div class='vediOffertaRigaSingle'><?= translateMonth($rstImmatricolazioneMese) . " del " .  $rstImmatricolazioneAnno ?></div>
                <div class='vediOffertaRigaMulti'><?=$rstDescrizione?></div>                                
            </div>
</div>

ed il css:

.vediOffertaColData, .vediOffertaColImages{
     border:1px solid black;
     float:left;
}                 


.vediOffertaColData{
     width:32%;
}

.vediOffertaColImages{
    width:35%;
}

.vediOffertaRigaSingle, .vediOffertaRigaMulti{
        text-align:left;
        margin-left:60px;    
}                     
.vediOffertaRigaSingle{
        height:20px;
}

In alcuni dati ho un'altezza fissa (un rigo solo) della div, quindi metto il valore nel css e risolvo. Ma in campi in cui la lunghezza varia come posso fare a fare in modo che il campo chiave (che è sempre fisso) sia della stessa altezza del campo variabile?
Mi conviene riscrivere tutto usando una sola div per riga e mettere la chiave dentro una label? L'idea l'ho provata altre volte ma mi è sempre sembrato un compromesso! Voi di solito che come la implementate una cosa simile?
Grazie a chi mi risponderà!

[Mich_]

Gli elenchi si rendono semanticamente con i tag di lista.
Nel tuo caso, puoi utilmente usare le liste di definizione:

HTML:
<dl>
  <dt>Marca:</dt> <dd><?=$rstMarca?></dd>
  <dt>Modello:</dt> <dd><?=$rstModello?> </dd>
  ...
>/dl>


CSS:
dl {
  width: ...;     /* non e` necessario, ma necessario se poi le larghezze % */
}
dt {
  width: 32%;
  height: 1.5em;
  float: left;
  clear: left;
}
dd {
  width: 35%;
  float: left;
}

[Nunkij]

Io mi son perso un po' di cose del passaggio verso il tableless!!! Grazie mile, L'altezza in em come unità di misura ha un significato particolare? Io son sempre stato scettico per le misure come quelle ma magari è un blocco mio!

[Mich_]

Per le misure dei blocchi su schermo ci sono essnzialmente tre unita` di misura, ciascuna adatta a scopi specifici e che vale la pena usare a seconda delle necessita`:
- px - pixel del monitor - adatta a blocchi che contengono essenzialmente immagini (che intrinsecamente sono espresse in px) oppure per layout di tipo fisso
- % - percentuale del blocco contenitore - adatta a layout proporzionali
- em - misura della lettera M - adatta a blocchi che contengono testo: e` proporzionale alla misura del carattere corrente, quindi se il carattere e` grande anche il contenitore si ingrandisce proporzionalmente. Ad esempio per la larghezza di un menu in cui si vuole occupare lo spazio necessario per contenere tutte le scritte senza che sbordino e senza avanzare troppo spazio. In questo caso, usato per l'altezza, 1.5em vuol dire un'altezza pari ad una interlinea e mezza.

Tieni presente che "tableless" vuol dire (tra l'altro): usare i tag per il loro significato semantico e non per come appaiono nei browser piu` comuni.

[Nunkij]

Sì ma infatti quello lo sapevo e come ogni sviluppatore mi sono dannato nel passaggio bestemmiando contro div infidi!
Ricordavo che l'em era una misura relativa ma non sapevo che si usava in questo modo. Grazie mille!

Ho risolto alla perfezione con le dl (tag che non avevo mai sentito)!

[duri93]

Scusate se mi intrometto

Premetto che ne so meno di voi, ma tableless si intende nella struttura della pagina, non nei dati, quindi in questo caso se devi rappresentare dati sotto forma di tabella la cosa migliore (e più corretta) è utilizzare una tabella... il discorso è non usare tabelle per scopi diversi (come creare la veste grafica del sito)

Infatti lo scopo delle w3c è semplificare il codice, soprattutto dal punto di vista logico: 'loro' dicono (riprendo la frase di Mich_) utilizzare i tag per il loro significato; quindi per fare una tabella utilizzi table (se ci pensi infatti in un codice html, se vedi il tag table pensi subito ad una tabella mentre se vedi un div pensi ad un contenitore)

Correggetemi se sbaglio

[Nunkij]

Certo ma la tabella è una struttura dati con un rapporto riga / colonna. Io non ho una situazione simile e quindi non è il caso di usarne una!

[Mich_]

Originariamente inviato da Nunkij
Certo ma la tabella è una struttura dati con un rapporto riga / colonna. Io non ho una situazione simile e quindi non è il caso di usarne una!

Esatto!

E` vero che qualche volta le liste sono in forma tabellare, ed allora e` giustificato usare le tabelle, ma per due colonne in linea di massima e` meglio usare le liste.

E comunque occorre sempre dare la precedenza al significato semantico: se la cosa piu` importante di un insieme di dati e` che formano una lista, e` meglio usare le liste.

Ad esempio un insieme di nomi, cognomi, citta`, indirizzi, telefoni: di solito uno li recepisce come lista, non come tabella (anche se hanno forma tabellare): questo e` un esempio al limite ed usare una tabella non e` sbagliato.
Ma se la cosa piu` significativa e` che sono una lista, e` meglio usare la lista (e poi inserire degli <span> all'interno, opportunamente formattati); se invece la cosa piu` importante e` poterli ordinare secondo una delle colonne (come in un foglio di calcolo) la semantica li vede come tabella, ed il tag <table> e` piu` indicato.