Logica corretta per trasformare una table

[Sciamano.box]

Ciao, partendo dal presupposto che non è corretto utilizzare le tabelle per impostare i contenuti ma è necessario usare i CSS,
come posso trasformare una tabella di questo tipo:



<table width="200" border="0" cellpadding="0" cellspacing="4">
<tr>
<td width="24">1</td>
<td width="62">immagine</td>
<td width="100">testo testo </td>
</tr>
<tr>
<td bgcolor="#CCCCCC">2</td>
<td bgcolor="#CCCCCC">immagine</td>
<td bgcolor="#CCCCCC">adasfdsa</td>
</tr>
<tr>
<td>3</td>
<td>immagine</td>
<td>fdgsdge</td>
</tr>
<tr>
<td bgcolor="#CCCCCC">4</td>
<td bgcolor="#CCCCCC">immagine</td>
<td bgcolor="#CCCCCC">bdsdbdsd</td>
</tr>
</table>


in CSS?

Scusate la domanda moooolto pratica, ma in base alla vostra risposta vorrei capire come gestire tutte le altre tabelle del mio sito


Grazie

[Sciamano.box]

Nessun suggerimento?

[Al_katraz984]

togli tutti i tag tabellari.. <table> <tr> <td> e relative chiusure..

ti resta:

1
immagine
testo testo

2
immagine
adasfdsa

3
immagine
fdgsdge

4
immagine
bdsdbdsd

scrivi il tutto in HTML corretto.. quindi

1</p>
[img][/img]


testo testo</p>



2</p>
[img][/img]


adasfdsa</p>



3</p>
[img][/img]


fdgsdge</p>



4</p>
[img][/img]


bdsdbdsd</p>

e lo inserisci in un contenitore.. il <div>

ti resta:

1
immagine
testo testo

2
immagine
adasfdsa

3
immagine
fdgsdge

4
immagine
bdsdbdsd

scrivi il tutto in HTML corretto.. quindi

<div id="quellokevuoi">


1</p>
[img][/img]


testo testo</p>


2</p>
[img][/img]


adasfdsa</p>


3</p>
[img][/img]


fdgsdge</p>


4</p>
[img][/img]


bdsdbdsd</p>
</div>

adesso puooi modificare quello che vuoi con i CSS in base alle tue esigenze..

div#quellokevuoi { .......... }
#quellokevuoi p { ......... }
#quellokevuoi img { ........ }
.qualcheclasse { ......... } 

Poi ci sono le guide dacci un'occhiata

[Al_katraz984]

ho copiato 2 volte una parte occhio..

[Mich_]

Anzitutto vedo una serie di errori logici sia nella domanda che nella risposta.

1. Premesso che le tabelle ci sono e possono venir usate, la domanda da porsi non e` "trasformare una tabella in CSS" (che e` una frase che non sta in piedi), ma "quale e` lo strumento piu` adatto per rendere questa idea"?

2. Assurdo quindi fare una lista usando i <div>. E assurdo non racchiudere ogni blocco logico in un blocco fisico. Le suddivisioni del codice DEVONO rispecchiare le suddivisioni logiche, altrimenti poi non sara` possibile usare correttametne i CSS.

Ora se quella e` una lista, si devono usare le liste. Probabilmente occorre usare una [list=1], che automaticamente inserisce i numeri.

Quindi il codice HTML potrebbe essere:

[img][/img]
    testo testo
[img][/img]
    adasfdsa
  ...

Se questo ha un senso dal punto di vista della resa, si puo` pensare a come realizzare il CSS.

[Sciamano.box]

Grazie ad entrambi per la risposta

Purtroppo nel mio caso l'elenco numerato era solo un esempio di contenuto

in ogni caso, mi spieghi questa definizione:

E assurdo non racchiudere ogni blocco logico in un blocco fisico. Le suddivisioni del codice DEVONO rispecchiare le suddivisioni logiche, altrimenti poi non sara` possibile usare correttametne i CSS.

[Mich_]

E` l'errore titpico che fanno molti quando trasformano un archivio di qualsiasi tipo in elettronico.

Ho visto segretarie ordinatissime (per i documenti cartacei) che non sono in grado di tener ordine tra i file del computer. L'archivio elettronico deve essere una copia fedele dell'archivio cartaceo, altrimenti l'elettronica perde l'80% dei suoi vantaggi.

Lo stesso vale per l'organizzazione delle informazioni in una pagina Web.
L'ordine (mentale) che ti fai (e che presumibilmente vuoi "trasmettere" al lettore), deve essere fedelmente rispecchiato nella struttura della pagina. Altrimenti da un lato perdi completamente l'accessibilita`, e dall'altro devi inventarti cose assurde per ripristinare l'ordine grafico.

Negli esempi iniziali avevi raggruppato (separandole con una linea bianca) i vari elementi: numero, immagine, testo. La "linea bianca" e` una separazione che deve ritrovarsi nella struttura del codice.
Nella tabella era rappresentata dal </tr><tr>; se non si usa la tabella deve essere ripresa da qualche altra struttura, raggruppando in <oggetti> opportuni. In qualche caso gli oggetti sono specifici (nel mio esempio era il[*] della lista ordinata), in altri casi occorre metterci un <div class="qualcosa"> in modo che possano essere tutto oggetti uguali ripetuti (che sono semplici da formattare con i CSS).

In mancanza di questa suddivisione, non sara` facile separare i vari pezzi (ad esempio far andare a capo, lasciare uno spazio, ...) perche` il computer (attuale) non ha capacita` di analisi semantica (che invece il cervello umano ha ed ha necessita` di ritorvare).

Ed ecco che siamo arrivati al punto di partenza: e` necessario che la suddivisione della pagina rispecchi il significato semantico, e che si utilizzino i tag sematicamente corretti: infatti i CSS di default danno una formattazione che rispecchia la semantica per cui i tag sono stati inventati.

[Sciamano.box]

Grazie per la risposta dettagliata, ma la soluzione di Al_katraz984 applicata ad un elenco senza numeri, quindi con 3 colonne di vario tipo in cosa non va bene?

Grazie

[Al_katraz984]

proprio perche si parla di elenco una soluzione potrebbe essere:

<div id="qualcosa">
[list=1]
    [*]
        <dl>
        <dt>1. <img src....>

testo testo</p></dt>
        <dd>descrizione a piacimento</dd>
        </dl>
             [/list]
</div> 

credo Mich_ si riferisse a questo quando parlava di codice ordinato.. cosi facendo con i CSS puoi controllare ogni elemento della lista e fare quello ke vuoi.. Ovvio che se non ti serve la lista completa puoi omettere dei tag...

[Mich_]

Originariamente inviato da Sciamano.box
ma la soluzione di Al_katraz984 applicata ad un elenco senza numeri, quindi con 3 colonne di vario tipo in cosa non va bene?

E` semanticamente sbagliata: usa tag che non rispecchiano la semantica di cio` che contengono.