CSS e tabelle

[liviasettantuno]

buondì, sto per realizzare un minicatalogo in un sito composto di foto + descrizione + costo/codice/sconto. Avevo pensato di sfruttare le tabelle per far ciò: è semanticamente corretto secondo voi?

Inoltre, e cosa più importante, lavorando con i css, quali sono gli attributi e i valori corretti da indicare rispettivamente per le table, i tr, e i td? ad esempio la distanza tra celle dove esattamente la devo indicare? La domanda risulterà sicuramente banale ma non ho trovato una guida CSS che mi chiarisca bene i dettagli...

Grazie anticipatamente per la disponibilità,
saluti Livia

[Mich_]

Non e` sbagliato usare una tabella per il catalogo.

Valuta pero` anche la possibilita` di usare una lista di definizione. Ad esempio:

<dl>
  <dt>titolo/nome</dt> 
  <dd>
    <img ...>foto</img>
    <p class="descr"> ... </p> 
    <p class="cocosc">
      <span class="costo">...</span>
      <span class="codice">...</span>
      <span class="sconto">...</span>
    </p>
  </dd>
  ... altre voci ..
</dl>

Dopodiche` tutti i blocchi interni avranno una width definita (img in px, gli altri in em).
<img> e

avranno float:left;
gli <span> avranno display:block, se devono formare tre righe, ma se serve si puo` dare loro float:right e larghezza quasi uguale al

che li contiene (naturalmente dovranno avere text-align:left, in modo da non vedere il float right)
Probabilmente i <dt> dovranno avere anche il clear:both (oltre al float:left), in modo da farli andare a capo.
E a qualche elemento dovrai applicare dei border, per separare le varie "righe" e "colonne".


Ragionamento semantico.
Hai ragione a chiedere cosa e` semanticametne corretto. Cosi` su due piedi (con le poche info che dai) non so rispondere, ma la domanda che devi farti (e a cui puoi rispondere tu direttamente, dato che sei l'unica che conosce a fondo i tuoi dati) e`:
Le colonne hanno un significato? In altre parole: Ha/avrebbe senso ordinare per prezzo, codice, sconto o altro?
Se la risposta e` si`, usare una tabella e` corretto; se la risposta e` no, la tabella non e` la soluzione piu` semantica.
Mi spiego con un esempio: supponi che gli articoli siano tutto macchine fotografiche: un utente potrebbe scegliere (anche) in base alla marca, al prezzo, ad altre caratteristiche che a quel punto dovrebbero avere ciascuna una loro colonna. In tal caso la tabella e` la soluzione piu` ragionevole (indipendentemente dal fatto che poi si possa effettivamente ordinare).
Se invece gli articoli sono una serie di elementi di un unico apparecchio, che per motivi commerciali si devono ordinare separatamente (per tornare all'esempio foto: il corpo-macchina, la batteria, l'obiettivo, la custodia, il caricabatterie, ...) allora forse la tabella non e` la soluzione migliore.


So che non ho risposto alla domanda, ma spero di averti dato qualche elemento in piu` da considerare affiche` alla risposta ci arrivi da sola.


Tag di tabelle
Tieni presente che per le tabelle esistono anche i seguenti tag:
<thead>, <tbody>, <tfoot>
<caption>
<tr>, <td>, <th>
<col>, <colgroup>
Se puoi usali: rendono la vita piu` semplice sia a te che al browser: soprattutto i <col> e <colgroup> sono strettamente legati alla formattazione CSS

[liviasettantuno]

Grazie Mich della risposta e delle informazioni. effettivamente ho domandato della sematica sul discorso tabelle perché qualche dubbio lo avevo, infatti anche se "graficamente" verrebbe da trattare questo minicatalogo come una tabella, mi verrebbe più da considerarlo un elenco di prodotti con descrizioni etc, oppure come dici tu una lista di definizione. E' un catalogo solo visivo nel senso che l'utente non può modificare alcun ordine. Tutte le righe - composte nell'ordine da foto prodotto, titolo, decrizioni, costi, etc - saranno allineate uno sotto l'altro. Da qui mi era sorto il dubbio se parlare di elenco o di tabella... Ma posso mettere una tabella all'interno di un elenco (o lista di definizione)?

[Mich_]

Ma posso mettere una tabella all'interno di un elenco (o lista di definizione)?

Dal punto di vista sintattico non dovrebbero esserci problemi (che io sappia).

Ma non so che senso abbia:
Se in ogni voce della lista hai una serie di "campi", vorrebbe dire fare una tabella di una sola riga in ogni voce. Ma una tabella di una sola riga non ha senso: in tal caso puoi fare con una serie di oggetti uguali (<span> con display:block, <div>, ...?) opportunamente formattati

Se pensi sia il caso di usare una tabella, a quel punto ha piu` senso usare una tabella unica per tutto: come ho gia` scritto, non e` sbagliato usare una tabella per un "catalogo".

Nota che stiamo discutendo su sottigliezze semantiche: sicuramente discussioni valide dal punto di vista teorico (stiamo pensando ad un problema e alle sue possibili soluzioni).
Poi pero` nella pratica non e` cosi` importante fare queste disquisizioni e sottigliezze.