legenda con i css

[hab]

Ciao dovrei fare una sorta di legenda di questo tipo:

quadratino colorato - descrizione del significato di quel colore nella tabella

come potrei farlo?
Con le liste??
Grazie mille

[Mich_]

La domanda e` relativa alla semantica dei tag.

Dierei che i tag piu` adatti sono le liste di definizione:

<dl>
  <dt>[img]col1.png[/img]</dt>
  <dd>descrizione del colore1</dd>
  <dt>[img]...[/img]</dt>
  <dd>descrizione del colore 2</dd>
  ...
</dl>

oppure:

 <dl>
  <dt class="col1"></dt>
  <dd>descrizione del colore</dd>
  <dt class="col2"></dt>
  <dd>descrizione del colore</dd>
  ...
</dl>

CSS:
dt.col1 { color: #...; }
dt.col12{ color: #...; }

Il primo caso e` piu` corretto dal punto di vista semantico (il colore fa parte del contenuto, non e` un elemento di abbellimento), il secondo e` leggermente piu` leggero (non devi scaricare le immagini).

Chiaramente l'esempio va integrato con le dimensioni delle immagini, con i float e i clear (sia float:left; che clear:left; a tutti i <dt>; float:left ai <dd>)

[hab]

Perfetto, ti ringrazio.
Un'ultima domanda: con i css è possibile creare dei quadratini colorati, senza aggiungergli delle img?
Grazie

[Mich_]

Originariamente inviato da hab
Perfetto, ti ringrazio.
Un'ultima domanda: con i css è possibile creare dei quadratini colorati, senza aggiungergli delle img?
Grazie

E` il mio secondo esempio.
Solo che non e` apparso correttamente nel forum: riscrivo la parte HTML:

<dt class="col1">&amp;nbsp;</dt>

[hab]

Ciao,
per dare un po di spazio in alto e in basso, tra le righe, come posso fare..?
se utilizzo padding sul dt il quadratino diventa più lungo come se fosse un rettangolo..(questo anche perchè per colorare io inserisco "background-color", se metto solo "color"il quadrato non lo vedo colorato)

io praticamente vorrei avere sempre la lista di cui sopra
quadrato colorato - descrizione
quadrato2 colorato - descrizione2

distanziati di un certo padding...come si fa'? Quale elemento posso utilizzare per comprendere dt e dd?
Grazie

[Mich_]

La distanza si da` con i margini.
Il margine ha sempre lo sfondo del contenitore, il padding lo sfondo del contenuto.

prova ad esempio a dare
margin: 2px 0;
sia ai dt che ai dl