table to css

[Cesar]

Salve a tutti.
Premetto che non sono bravo per niente con i layout in css (cosiddetti div).

Però, in questo momento devo usarli perché sto facendo una paginazione che ripete il seguente codice per 100 volte.

<table width="760" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="660"></td>
    <td width="100" rowspan="2"><div align="center"></div></td>
  </tr>
  <tr>
    <td></td>
  </tr>
  
  <tr>
    <td colspan="2" class="sfondo2">[img]../img/pixel.gif[/img]</td>
  </tr>
</table>

Come faccio a trasformare questa tabella in un div ?
Vi ringrazio.

[pierofix]

Uellà!

Allora, cosa dire? Premetterei che stai partendo con il piede sbagliato. Abbandonare le tabelle-layout non significa passare ciecamente all'utilizzo di div. (Per assurdo, un'impaginazione può addirittura farne del tutto a meno.) Passare alla progettazione intelligente significa utilizzare appropriatamente gli strumenti a disposizione.

Qui è ad esempio il caso del markup. Tu ci chiedi come tramutare in tableless la porzione di codice postata. La nostra risposta è: Con le informazioni che ci hai dato, ci è impossibile lavorare.

Eh sì, perchè markup è significato, non presentazione. Occorre quindi che tu ci illustri il SIGNIFICATO della struttura che vuoi realizzare, non la sua presentazione (quella viene successivamente).

[Cesar]

Originariamente inviato da pierofix
Occorre quindi che tu ci illustri il SIGNIFICATO della struttura che vuoi realizzare, non la sua presentazione (quella viene successivamente).

spiegati meglio

[pierofix]

Scusa, forse sono stato troppo frettoloso nella risposta. Mmm... il concetto è semplice ma mi è difficile esporlo.

Diciamo che quel codice che ci hai postato fa parte di un documento: di cosa tratta questo documento? Dacci una descrizione generica e a parole (non tramite codice).

Quel codice HTML specifico, poi, dovrebbe servire a descrivere delle informazioni, giusto? Ad esempio, cos'è, un elenco di prodotti? Una serie di libri, con copertina, titolo e autore? Insomma, descrivici a parole il SIGNIFICATO delle informazioni che vuoi andare a strutturare.

[Cesar]

il titolo, la descrizione e il prezzo di un prodotto.

[V4NY]

Ecco qui nello style inserisci :

body{
	text-align: center;
}
#container{
	width: 760px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}
#content{
	display: inline;
	float: left;
	width: 660px;
}
#contentright{
	display: inline;
	float: right;
	width: 100px;
}
#footer{
	clear: both;
}

nel body :

<div id="container">
	<div id="content">
		content
	</div>
	
	<div id="contentright">
		contentright
	</div>
	
	<div id="footer">
		footer
	</div>
</div>

Ovviamente ora sta a te dare le proprietà alle varie classi ^^

[Cesar]

ti ringrazio!

[V4NY]

Prego ^^!

[pierofix]

Ragazziii!!! VVoVe: Ripeto: abbandonare le tabelle-layout non significa buttarsi a capofitto sui div. XHTML ha un centinaio di tag, quindi vediamo di scegliere quelli appropriati.

il titolo, la descrizione e il prezzo di un prodotto.

Tu hai una SERIE di informazioni simili? Diciamo un elenco di prodotti, ove per ognuno hai un titolo, una descrizione ed un prezzo? My dear, allora ti servono proprio le tabelle.

Un esempio:

<table summary="Elenco prodotti della categoria 'cibo'">
   <caption>Elenco prodotti della categoria cibo</caption>
   <thead>
      <tr>
         <th scope="col">Titolo</th>
         <th scope="col">Descrizione</th>
         <th scope="col">Prezzo</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Banane</td>
         <td>Frutto giallo, di forma allungata. Ricco di potassio</td>
         <td>
            <span class="prezzo">3.00</span> 
            <span class="valuta">€</span>
            <span class="pezzi">/Kg</span>
         </td>
      </tr>
      <tr>
         <td>Carote</td>
         <td>Verdura arancione, ricca di vitamine.</td>
         <td>
            <span class="prezzo">2.00</span> 
            <span class="valuta">€</span>
            <span class="pezzi">/Kg</span>
         </td>
      </tr>
   </tbody>
</table>