[CSS] Simulare una tabella

Salve,
avrei bisogno di un piccolo aiuto:

<table width="100%">
<tr>
<td>
Sinistra
</td>
<td>
Centro
</td>
<td>
Destra
</td>
</tr>
</table>

Vorrei avere un risultato simile con i css.

Ho provato con float per sinistra e destra e al centro con margin...ma sinistra e destra stanno al di sotto.. :S

(Ho trovato una persona col mio stesso problema http://itlists.org/pipermail/cssdesi...er/000585.html ma non ho visto la soluzione :S)


Edit--
Ho trovato una soluzione che sembra carina e funziona:

http://forum.cached.it/forum/t526-Im...ition-DIV.html

Se avete altre idee fate pure..

[miki92]

Non so se questo è ciò che volevi ma:
HTML:

<div id="container">
	<div id="left_col">Sinistra</div>
	<div id="page_content">Centro</div>
	<div id="right_col">Destra</div>
</div>

CSS:

#left_col {
	width: 200px;
	position: absolute;
	left: 0px;
	top: 0px;
}

#right_col {
	width: 200px;
	position: absolute;
	top: 0px;
	right: 0px;
}

#page_content {
	margin-right: 200px;
	margin-left: 200px;
}
	
#container {
	position: relative;
	width: 100%;
}

[luca1962]

<table width="100%">
<tr>
<td>
Sinistra
</td>
<td>
Centro
</td>
<td>
Destra
</td>
</tr>
</table>

Ho provato a fare il copia/incolla nel Notebook, e vengono vsualizzate le 3 parole appaiate in 3 colonne distinte.

[Xsescott]

Ho provato a fare il copia/incolla nel Notebook, e vengono vsualizzate le 3 parole appaiate in 3 colonne distinte.

infatti deve essere quello in risultato: <td> definisce le colonne, <tr> le righe.

non ci credi? metti un border="1" nel tag <table> e sbizarrisciti a modificare e vedere cosa succede

ciao

Ho provato a fare il copia/incolla nel Notebook, e vengono vsualizzate le 3 parole appaiate in 3 colonne distinte.

Che ti aspettavi?

[dementialsite]

Forse così è ancora più semplice:

<!-- prima riga -->
<div style="clear:left;float:left;width:..."> <!-- prima cella --> </div>
<div style="float:left;width:..."> <!-- seconda cella --> </div>
<div style="float:left;width:..."> <!-- terza cella --> </div>
...
<div style="float:left;width:..."> <!-- ultima cella --> </div>

<!-- seconda riga -->
<div style="clear:left;float:left;width:..."> <!-- prima cella --> </div>
<div style="float:left;width:..."> <!-- seconda cella --> </div>
<div style="float:left;width:..."> <!-- terza cella --> </div>
...
<div style="float:left;width:..."> <!-- ultima cella --> </div>

...

Due i pro:
- non devi dannarti con i posizionamenti assoluti
- puoi inserire quante celle vuoi, senza modificare troppo i CSS
Due i contro:
- se la tabella è troppo grande, i DIV finiscono sotto (e quella che progetti come una riga singola finisce sviluppata su più righe)
- non puoi inserire bordi, altrimenti si scopre il trucco...

Stammi bene...

Utilizzare il display? Ecco tutte le proprietà.
Non so come stiamo messi a livello di compatibilità...però...sono interessanti le proprietà table-cell, ecc...

..syl..

Utilizzare il display? Ecco tutte le proprietà.
Non so come stiamo messi a livello di compatibilità...però...sono interessanti le proprietà table-cell, ecc...

..syl..

Sì confermo, gli do un'occhiata grazie :)