div con dati a mo di tabella...

[theorange]

eccomi qua.
digerito la strutturazione di un sito con i CSS, mi ritrovo con questo quesito.

devo inserire in alcune pagine un listino prodotti (cosa facilissima da fare con le tabelle) diviso in 4 colonne con
una struttura come nel seguente schizzo:



le prime due colonne contengono titolo e descrizione (x 5 voci) e le ultime due foto e disegno tecnico (cliccabile per visalizzarlo in una popup)

il tutto per n prodotti...

è fattibile con i CSS???

cosa mi consigliate??

[kaze]

Ti consiglio le tabelle

Le tabelle non vanno usate per il layout dei siti ma vanno usate per i dati di tipo tabellare ERGO in questo caso le tabelle sono esattamente quello che serve !

[pierofix]

Originariamente inviato da kaze
Ti consiglio le tabelle

Le tabelle non vanno usate per il layout dei siti ma vanno usate per i dati di tipo tabellare ERGO in questo caso le tabelle sono esattamente quello che serve !

Quoto.

Se magari ci illustri i dati che andrebbero inseriti nella struttura magari potremmo aiutarti a creare una tabella conforme ed accessibile.

[theorange]

allora, all'interno del <DIV>:

<DIV ID=dati>

<TABLE WIDTH=800 BORDER=2 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD WIDTH=200 ALIGN=left VALIGN=middle>
titolo
</TD>
<TD WIDTH=200 ALIGN=left VALIGN=middle>
descrizione
</TD>
<TD ROWSPAN=5 WIDTH=200 ALIGN=left VALIGN=middle>
fotografia
</TD>
<TD ROWSPAN=5 WIDTH=200 ALIGN=left VALIGN=middle>
disegno tecnico
</TD>
</TR>
<TR>
<TD WIDTH=200 ALIGN=left VALIGN=middle>
titolo
</TD>
<TD WIDTH=200 ALIGN=left VALIGN=middle>
descrizione
</TD>
</TR>
<TR>
<TD WIDTH=200 ALIGN=left VALIGN=middle>
titolo
</TD>
<TD WIDTH=200 ALIGN=left VALIGN=middle>
descrizione
</TD>
</TR>
<TR>
<TD WIDTH=200 ALIGN=left VALIGN=middle>
titolo
</TD>
<TD WIDTH=200 ALIGN=left VALIGN=middle>
descrizione
</TD>
</TR>
<TR>
<TD WIDTH=200 ALIGN=left VALIGN=middle>
titolo
</TD>
<TD WIDTH=200 ALIGN=left VALIGN=middle>
descrizione
</TD>
</TR>

</DIV>

questa è brutalmente la tabella...
unica cosa, come faccio a dire che questa tabella deve stare a 8px dal margine sinistro e a 50px dal margine destro???

[kaze]

Nello style di dati imposti i margin-left e margin-right !!!

O forse non ho capito :master:

[theorange]

non posso invece attribuire una class alla tabella dove indicare i margini esterni e la sua posizione???

scusate l'ignoranza!!!

[pierofix]

Abbandonare le tabelle-layout non significa solo "usare i div". Occorre imparare a ragionare sulle cose.

Quando ti chiedo di illustrare i dati che devi strutturare non devi propormi un codice HTML. Dovresti, invece, descrivere i vari dati - magari elencandoli - ed individuare le relazioni riga-colonna che dovrebbero dare un senso alla struttura stessa.

Semplicemente, dicci a parole cosa la tabella deve rappresentare.

[theorange]

hai ragione scusa...
la tabella deve rappresentare la descrizione dei vari prodotti.

modello - codice
tipologia - descrizione
materiali - elenco
livello di segnale - dB
note - eventuali note

e nelle ultime due celle a destra disegno e foto.

questo per N prodotti.

cmq, ho cercato un po in giro ma non trovo nulla riguardo alla strutturazione a classi delle celle...

nel css, posso mettere:

.table {
struttura
}
.td {
struttura
}

e poi richiamarle con class=nome , dentro a TABLE e TD.

dico bene?

[pierofix]

Originariamente inviato da theorange
la tabella deve rappresentare la descrizione dei vari prodotti.

modello - codice
tipologia - descrizione
materiali - elenco
livello di segnale - dB
note - eventuali note

e nelle ultime due celle a destra disegno e foto.

questo per N prodotti.

Ok, chiaro. La mia risposta permane: ti serve una tabella, in questo caso.

nel css, posso mettere:

.table {
   struttura
}
.td {
   struttura
}

e poi richiamarle con class=nome , dentro a TABLE e TD.

dico bene?

Sì, dici bene. Ecco un esempio:

XHTML
<table class="prodotti">
   ...
   <tr>
      <td class="modello">
         ...
      </td>
   </tr>
   ...
</table>

CSS
.prodotti .modello { color:red }

[theorange]

ok, allora ero sulla buona strada!!!

grazie mille per il tempo che mi avete dedicato!

ovviamente per non appesantire la pagina farò ricorso ad un db e al php, e ho già tutto pronto.

via, si parte!