Come si converte in table-less questa table?

**Rubberick** · 23-07-2006, 11:45

<table cellpadding=0 cellspacing=0 width=100%>
<tr>
<td></td>
<td></td>
</tr>
</table>

Se possibile poi la vorrei inserire in un'altra :

<table cellpadding=0 cellspacing=0 width=100%>
<tr>
<td>

<table cellpadding=0 cellspacing=0 width=100%>
<tr>
<td></td>
<td></td>
</tr>
</table>

</td>
</tr>
<tr><td height=6></td></tr>
<tr><td>bla bla</td></tr>
</table>

ringrazio anticipatamente chi solverà questo mio grattacapo

i div affiancati verticalmente non li so fare :'(

**pierofix** · 24-07-2006, 09:00

Abbandonare le tabelle-layout non significa passare ciecamente ai div. Significare imparare ad usare il markup per quello che è il suo scopo, ovvero descrivere, organizzare e strutturare le informazioni di un documento.

Non va usato per impaginare, per creare il layout. A quello ci pensano i fogli di stile CSS.

Spero che questo articolo possa aiutarti a fare chiarezza sull'argomento:

- http://pesanervi.diodati.org/pn/index.asp?a=293

**Rubberick** · 24-07-2006, 16:51

Forse mi sono espresso male... Conosco "il passaggio dalle vecchie pagine obese a quelle leggere e intelligenti"...

Pero' il mio problema e' quello di impaginare due blocchi di testo in orizzontale... vorrei usare appunto le css per impaginare il testo invece delle tabelle...

Normalmente avrei usato un...

<table><tr><td>testo a</td><td>testo b</td></tr><table>

Ho provato ad usare 2 div al 50% della larghezza ma vengono impilati in verticale

<div style="width:50%">testo a</div><div style="width:50%">testo b</div>

Cioe' vengono cosi':

[testo a]
[testo b]

invece di venire cosi':

[testo a] [testo b]

(con le tabelle ci riesco ma abbiamo appunto detto di separare impaginazione dal contenuto...)

**pierofix** · 24-07-2006, 17:03

Prova semplicemente ad usare una larghezza inferiore a 50%. Prova con 45%... dipende anche da eventuali margini e padding che hai attribuito agli elementi.

**Vincent.Zeno** · 24-07-2006, 17:29

codice:

 
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nuova pagina 1</title>
<style>
body {margin: 0 auto}
#container {width: 100%; border: 1 px solid red;}
.testo1 {width: 49%; border: 1 px solid black; float: left;}
.testo2 {width: 49%; border: 1 px solid black; float: left;}
.testo3 {width: 49%; border: 1 px solid black; float: left;}
.testo4 {width: 49%; border: 1 px solid black; float: left;}
</style>
</head>

<body>
<div id="container">
 <div class="testo1">testo cella uno</div>
 <div class="testo2">testo cella due</div>
 <div class="testo3">testo cella tre</div>
 <div class="testo4">testo cella quattro</div>
</div>
</body>

</html>

ti ho messo 49% di larghezza perchè ci sono i bordi: le "celle" tornerebbero a capo

**Rubberick** · 24-07-2006, 18:07

Grazie lo provo subitoz

Eventualmente penso si possano aggiungere 6 px in mezzo di spaziatura... uso un padding right sulla seconda?

**Vincent.Zeno** · 24-07-2006, 18:11

Puoi fare quello che vuoi...
io te li ho fatti corti per poterli vedere e distinguere, solo questo.

**Rubberick** · 24-07-2006, 20:31

Un'altro helpino

sto facendo una sostituz di un'altra tabella ^^

<table>
<tr><td>testo a</td></tr>
<tr><td height=6></td></tr>
<tr><td>testo b</td></tr>
<tr><td heigth=6></td></tr>
<tr><td>testo c</td></tr>
</table>

avevo pensato a
<style>.spacer { height:6px }</style>

<div>testo a</div>
<div class="spacer"></div>
<div>testo b</div>
<div class="spacer"></div>
<div>testo c</div>

Su ffox funziona, su ie invece quelli gli spacer da 6px diventano + grossi

Diventano grandi come una linea di testo... meno ie non va :\

In alternativa potrei fare
<style>.testo_b { padding-top:6px; padding-bottom:6px }</style>

<div>testo a</div>
<div class=testo_b>testo b</div>
<div>testo c</div>

Ma stilisticamente non mi piace troppo :\ .. qualche idea?

**Vincent.Zeno** · 24-07-2006, 21:05

Bisogna uscire dal concetto "traduciamo questa taballa".

Lavorare con DIV è diverso. In tutto.

Comunque assegnerei margin-top e margin-bottom ai contenitori di testo.

**Rubberick** · 24-07-2006, 21:38

Come mai margin al posto di padding?

Lo so che occorre uscire dal concetto di usare i div al posto di table, tuttavia per i layout che faccio ho problemi a usare soluzioni completamente table-less.. ora come ora mixo i due stili... nel futuro man mano che faro' esperienza con le soluzioni alternative il tutto sara' + leggibile e leggero...

Gia' ho fatto dei siti che sono completamente stampabili

Quello che + mi crea casini ora come ora e' il costruire un codice che sia compatibile cross-browsers... se uso le table ie e mozzy si comportano allo stesso modo...

se uso div, spans e markup con css oltre un certo tot alle spalle ie se ne va a farsi benedire...

mica posso costringere quel 70% di idioti sulla faccia della terra a buttarlo quel browser :P

vorrei tanto ma nn e' possibile...

spero che con il passaggio a ie7 perlomeno abbiano rifatto il motore di rendering rendendolo w3c compatible...

Discussione: Come si converte in table-less questa table?

Strumenti discussione

Ricerca discussione

Visualizza

Come si converte in table-less questa table?

Permessi di invio