Da tabella a div

[harry80]

Salve ragazzi,

stò imparando da poco i CSS e vorrei creare in CSS la seguente tabella HTML

<table width="680" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="200" height="150"></td>
    <td width="40" height="150"></td>
    <td width="200" height="150"></td>
    <td width="40" height="150"></td>
    <td width="200" height="150"></td>
  </tr>
  <tr>
    <td width="200" height="40"></td>
    <td width="40" height="40"></td>
    <td width="200" height="40"></td>
    <td width="40" height="40"></td>
    <td width="200" height="40"></td>
  </tr>
  <tr>
    <td width="200" height="150"></td>
    <td width="40" height="150"></td>
    <td width="200" height="150"></td>
    <td width="40" height="150"></td>
    <td width="200" height="150"></td>
  </tr>
  <tr>
    <td width="200" height="40"></td>
    <td width="40" height="40"></td>
    <td width="200" height="40"></td>
    <td width="40" height="40"></td>
    <td width="200" height="40"></td>
  </tr>
  <tr>
    <td width="200" height="150"></td>
    <td width="40" height="150"></td>
    <td width="200" height="150"></td>
    <td width="40" height="150"></td>
    <td width="200" height="150"></td>
  </tr>
</table>

ma non so proprio come incastonare/definire i div, mi date una mano?

[ZapoTeX]

Ciao Harry,

mi fa piacere aiutarti! Su questo forum ho chiesto aiuto parecchie volte e mi fa piacere ricambiare ogni tanto.

L'idea del css è separare il contenuto dal layout. Quindi nel tuo html avrai banalmente una serie di "div" uno dietro l'altro. Nel css spiegherai come sti div vanno messi.

Io farei così:

<div class="riga">
<div class="colonnada200"></div>
<div class="colonnada40"></div>
<div class="colonnada200"></div>
<div class="colonnada40"></div>
<div class="colonnada200"></div>
</div>

ripetuto quante volte serve. Poi nel CSS fai:

.riga {
height: 150px;
padding: 0px;
margin: 0px;
width: 680px;
}

.colonnada200 {
float: left;
width: 200px;
height: 150px;
padding: 0px;
margin: 0px;
}

.colonnada40 {
float: left;
width: 40px;
height: 150px;
padding: 0px;
margin: 0px;
}

Ci sono certamente modi più eleganti per farlo, ma così, se non ho fatto qualche errore, dovrebbe funzionare.

Ciao!

[harry80]

Originariamente inviato da ZapoTeX
Ciao Harry,

mi fa piacere aiutarti! Su questo forum ho chiesto aiuto parecchie volte e mi fa piacere ricambiare ogni tanto.

L'idea del css è separare il contenuto dal layout. Quindi nel tuo html avrai banalmente una serie di "div" uno dietro l'altro. Nel css spiegherai come sti div vanno messi.

Io farei così:

<div class="riga">
<div class="colonnada200"></div>
<div class="colonnada40"></div>
<div class="colonnada200"></div>
<div class="colonnada40"></div>
<div class="colonnada200"></div>
</div>

ripetuto quante volte serve. Poi nel CSS fai:

.riga {
height: 150px;
padding: 0px;
margin: 0px;
width: 680px;
}

.colonnada200 {
float: left;
width: 200px;
height: 150px;
padding: 0px;
margin: 0px;
}

.colonnada40 {
float: left;
width: 40px;
height: 150px;
padding: 0px;
margin: 0px;
}

Ci sono certamente modi più eleganti per farlo, ma così, se non ho fatto qualche errore, dovrebbe funzionare.

Ciao!

Grazie e scusa il ritardo, funziona alla grande! Come dici tu, se ci sono altre soluzioni più eleganti, ben vengano, ma come detto la tua funziona!

[ldetomi]

Io penso che in questo specifico caso che appare proprio come una griglia tabellare.... l'uso delle tradizonali tabelle sia ancora il più indicato! Tutto sommato, come vedi, non è che trasformare tutto in DIV ti ha semplificato il codice o la gestione.... Le tabelle non sono deprecate del tutto, lo sono solo per i layout ma non bisogna diventare talebani!!!

Io lascerei la tabella, con una classe per ogni cella, e poi imposterei la larghezza via CSS.
Si potrebbe anche usare il tag COLUMN nella tabella, in modo da non dover ripetere il nome della classe nel codice ma... dichiarare gli stili su questo elemento non è compatibile con tutti i browser purtroppo, quindi il risultato è meno robusto....

[harry80]

Originariamente inviato da ldetomi
Io penso che in questo specifico caso che appare proprio come una griglia tabellare.... l'uso delle tradizonali tabelle sia ancora il più indicato! Tutto sommato, come vedi, non è che trasformare tutto in DIV ti ha semplificato il codice o la gestione.... Le tabelle non sono deprecate del tutto, lo sono solo per i layout ma non bisogna diventare talebani!!!

Io lascerei la tabella, con una classe per ogni cella, e poi imposterei la larghezza via CSS.
Si potrebbe anche usare il tag COLUMN nella tabella, in modo da non dover ripetere il nome della classe nel codice ma... dichiarare gli stili su questo elemento non è compatibile con tutti i browser purtroppo, quindi il risultato è meno robusto....

Si, ma quella tabella è per impaginare una galleria immagini, quindi parte di un layout, meglio fare pratica sbattendo la testa e con l'aiuto di voi utenti per andare verso il tableless che fossilizzarsi con tecniche che diventano sempre più obsolete benché molto più intuitive e pratiche nella realizzazione/gestione.

[ldetomi]

Guarda, senza ovviamente voler scatenare una guerra filosofica... io credo che se per realizzare la stessa cosa senza tabelle, devo scrivere altrettanto codice e in più dover specificare molto più CSS.... tutto sommato può andare bene anche la tabella.... opinione personale cmq....