como convertir las tablas

[estibaliz2006]

hola a todos. os cuento. tengo un sistema en php que es un catálogo online. todo está maquetado en css salvo el tema de mostrar los productos del catálogo. esos productos del catálogo están maquetados con tablas de tal modo que el sistema muestra los productos en 3 columnas. así, cuando en la primera fila ya ha mostrado los 3 productos en su respectiva columna, el cuarto producto lo pasa a la primera columna de la segunda fila. es decir, cierra el <td> y el <tr> de esa fila y lo pasa a la siguiente. no sé si me explico. cómo puedo hacer un sistema más o menos maquetandolo en css?

[Mikmoro]

Pues depende.

¿El diseño es fluido o estático (se adapta al ancho o es de ancho fijo)?
¿Cómo introduces los datos de los productos en cada celda? ¿en un div dentro de la celda o direectamente en ella?

Hay más cosas que saber para ver cómo podrías hacerlo exactamente, pero estas que te pongo son básicas.

[estibaliz2006]

el ancho de la tabla en sí es fijo. las fotografías de los productos se redimensionan para que "cojan" esas tres en ese ancho perfectamente. los datos van directamente en la celda. en este apartado no uso css. va todo en tablas. ya os digo que es lo que quiero solucionar

[Mikmoro]

Bueno, si muestras el código que estás usando para las tablas creo que no será difícil imitarlo con cajas. Sí te anticipo que lo lógico es flotar las cajas para que se vayan colocando una al lado de la otra, y darles el ancho igual a tus celdas de manera que la cuarta no quepa y se vea obligada a saltar, pero en realidad depende de otros factores para saberlo con exactitud.

[imagen021]

A ver, no equivoquemos los conceptos...

El uso de tablas no está mal... porqué quieres eliminarlo?

Las tablas nacieron y existen para mostrar datos tabulados. El uso erroneo que se les dio fue el de contener la estructura de la web.

Pero, usar una tabla para mostrar datos que se tienen que ver en forma de tabla es TOTALMENTE CORRECTO y tu web validará igual, se verá en todos los navegadores y cumplirás los estándares que quieras cumplir.

Ahora si por gusto, te quieres complicar a hacer en divs lo que se puede hacer con una tabla, muestra tu ejemplo y lo vemos.

Saludos!!

[Mikmoro]

Iniciado por imagen021

A ver, no equivoquemos los conceptos...

El uso de tablas no está mal... porqué quieres eliminarlo?

Es probable que sus datos no sean tabulados. Sin haberlo visto, una celda que contiene una imagen, descripción, precio, etcétera, y al lado otra celda igual no es mi idea de datos tabulados. Al menos a mi entender.

Supongo que esta frase se presta a confusión:

de tal modo que el sistema muestra los productos en 3 columnas

Sin embargo esta otra lo aclara:

cuando en la primera fila ya ha mostrado los 3 productos en su respectiva columna

[estibaliz2006]

estoy con el portatil y no tengo a mano el código exacto para ponerlo. pero por ejemplo supongamos este código que también maqueta los resultados en columnas. ¿cómo lo convertiríamos en css? (el código es el que aparece en las FAQs?

Código PHP:

  echo "<table align=center>"; 
 
$columnes = 4; # Número de columnas (variable) 
 
if (($rows=mysql_num_rows($result))==0) { 
  echo "<tr><td colspan=$columnes>No hay resultados en la BD.</td></tr> "; 
} else { 
  echo "<tr><td colspan=$columnes>$rows Resultados </td></tr>"; 
} 
 
for ($i=1; $row = mysql_fetch_row ($result); $i++) { 
$resto = ($i % $columnes); # Número de celda del <tr> en que nos encontramos 
if ($resto == 1) {echo "<tr>";} # Si es la primera celda, abrimos <tr> 
    echo "<td>$row[1]</td>";  
if ($resto == 0) {echo "</tr>";} # Si es la última celda, cerramos </tr> 
} 
if ($resto <> 0) { # Si el resultado no es múltiple de $columnes acabamos de rellenar los huecos 
$ajust = $columnes - $resto; # Número de huecos necesarios 
for ($j = 0; $j < $ajust; $j++) {echo "<td>&nbsp;</td>";} 
echo "</tr>"; # Cerramos la última línea </tr> 
} 
mysql_close($connexion); 
echo "</table>"; 
   

[estibaliz2006]

alguna ayuda?

[Mikmoro]

En este código no veo que indiques el ancho fijo de la tabla que comentabas, ni el tamaño de las celdas, ni ninguna de sus propiedades.

Yo al menos en lo que te puedo ayudar es en lo siguiente: tu pones el código generado html, no el fuente, para ver el resultado exacto que obtienes usando tablas; yo te pongo cómo conseguir exactamente el mismo resultado con cajas (divs) si es posible (que supongo que sí), y luego tú incorporas el resultado a tu código para que genere exactamente lo que quieres.

¿Te parece?

[estibaliz2006]

si...pero mi problema es cómo demonios le digo yo que si es la tercera imagen en una fila (o la tercera columna) cierre la fila y la columna (en este caso sería el div, no?) y si no es la tercera, que siga abierto?
por cierto, este es el html que genera (son dos productos por cada fila, es decir, dos columnas):

Código PHP:

  <table align=center cellspacing=1 cellpadding=1><tr><td><table><tbody><tr><td align=center class=celda valign=middle width=275 height=40><a class=textenlace0 href=javascript:popup('verpto.php?id=5');>Grabadora Dvd Samsung 18x SATA</a></td></tr>
    <tr><td class=celda1><table><tbody><tr><td style='padding-right: 5px'><img src='mini.php?img=productos/grabadora.jpg&alto=100&ancho=100' border=0></td>
    <td class=text1 valign=top style='padding-left: 15px; border-left: 1px dotted #CCCCCC'>69,00 &#8364; Euros<br><br>
    <span class=text4>Reproductor de DVD&#177;RW (±R DL) / DVD-RAM 
Tipo incluido Interna 
Colo... </span><br><a href=# class=textenlace2>[+] Más detalles</a></a>
    </td></tr></tbody></table></tr></tbody></table>
    </td><td><table><tbody><tr><td align=center class=celda valign=middle width=275 height=40><a class=textenlace0 href=javascript:popup('verpto.php?id=4');>IMPRESORA MULTIFUNCION BROTHER (FAX) MFC3360C</a></td></tr>
    <tr><td class=celda1><table><tbody><tr><td style='padding-right: 5px'><img src='mini.php?img=productos/impresora1.jpg&alto=100&ancho=100' border=0></td>
    <td class=text1 valign=top style='padding-left: 15px; border-left: 1px dotted #CCCCCC'>350,00 &#8364; Euros<br><br>
    <span class=text4>Funciones: Copier, FAX Machine, Printer, Scanner Tipo de interfaz: USB... </span><br><a href=# class=textenlace2>[+] Más detalles</a></a>
    </td></tr></tbody></table></tr></tbody></table>
    </td></tr><tr><td><table><tbody><tr><td align=center class=celda valign=middle width=275 height=40><a class=textenlace0 href=javascript:popup('verpto.php?id=2');>Sotec PC Station BJ</a></td></tr>
    <tr><td class=celda1><table><tbody><tr><td style='padding-right: 5px'><img src='mini.php?img=productos/pc.jpg&alto=100&ancho=100' border=0></td>
    <td class=text1 valign=top style='padding-left: 15px; border-left: 1px dotted #CCCCCC'>1.545,00 &#8364; Euros<br><br>
    <span class=text4>El Sotec PC Station BJ es un ordenador de sobremesa que se puede pedir... </span><br><a href=# class=textenlace2>[+] Más detalles</a></a>
    </td></tr></tbody></table></tr></tbody></table>
    </td><td><table><tbody><tr><td align=center class=celda valign=middle width=275 height=40><a class=textenlace0 href=javascript:popup('verpto.php?id=3');>Sony Vaio VGN-FJ270/B</a></td></tr>
    <tr><td class=celda1><table><tbody><tr><td style='padding-right: 5px'><img src='mini.php?img=productos/portatil1.jpg&alto=100&ancho=100' border=0></td>
    <td class=text1 valign=top style='padding-left: 15px; border-left: 1px dotted #CCCCCC'>650,00 &#8364; Euros<br><br>
    <span class=text4>Descubre un portatil con pantalla de tecnologia Sony-XBRITE y no querr... </span><br><a href=# class=textenlace2>[+] Más detalles</a></a>
    </td></tr></tbody></table></tr></tbody></table>
    </td></tr></table> 
   

los class son solo los relativos a color de la celda y demás...nada de situacion

[Mikmoro]

Iniciado por estibaliz2006

si...pero mi problema es cómo demonios le digo yo que si es la tercera imagen en una fila (o la tercera columna) cierre la fila y la columna (en este caso sería el div, no?) y si no es la tercera, que siga abierto?
por cierto, este es el html que genera (son dos productos por cada fila, es decir, dos columnas):

La cosa es que no necesites decírselo, sino que marcando el ancho del contenedor, cuando no quepa pasará a la siguiente línea de forma natural. De ahí que te preguntara si la tabla en sí era de ancho fijo, que sería la manera de controlar que en un determinado momento pase a la siguiente línea.

Mira este ejemplo

Nada le dice que salte, simplemente es que no cabe y debe ocupar la siguiente línea del flujo del documento.

[estibaliz2006]

exacto!!!!....eso es.....y para el caso en concreto este, donde son dos columnas? y si las celdas o columnas van a su vez maquetadas, es decir, dentro de esa columna, el título tiene un fondo y un color y la imagen otro fondo y otro color...?

[Mikmoro]

Iniciado por estibaliz2006

exacto!!!!....eso es.....y para el caso en concreto este, donde son dos columnas? y si las celdas o columnas van a su vez maquetadas, es decir, dentro de esa columna, el título tiene un fondo y un color y la imagen otro fondo y otro color...?

Pues en ese caso, igual que estás metiendo una tabla dentro de cada celda, se crea una composición de cajas dentro de cada caja contenedora, y eso es exactamente lo que se necesita saber para poder transformar tu código a xhtml+css.

En un rato te hago el ejemplo de lo que tienes.

[estibaliz2006]

mil gracias por tu ayuda....espero impaciente...gracias otra vez

[Mikmoro]

Una pregunta importante: ¿lo quieres tener como se ve en Firefox o como se ve en IE6?

[estibaliz2006]

hombre, lo ideal sería para los dos...en el resto de la maquetación utilizo hacks para ie. lo conveniente sería que funcionara en los dos....

[Mikmoro]

No me refiero a eso, sino a que si tú ahora el trozo que has puesto lo ves como se ve en FF (dos celdas de 275px pegadas a la izquierda) o como se ve ahora en IE6 (dos celdas del 50% que ocupan todo el ancho de la pantalla.

[imagen021]

En PHP podrías hacerlo así...

Código PHP:

  //... viene de tu consulta
 
$c=1;
do
{
if ($c==1) echo "<tr>";
echo "<td>lo que quieras</td>";
$c+ =1;
if ($c>=3) $c=1;
}
while //... valores de tu consulta 
   

Con eso, según el valor de $c te escribe un nuevo TR

Saludos!!

[estibaliz2006]

perdona mikmoro no te había entendido. ese código es como se ve en ie6. así vendría bien aunque ya te digo lo anterior. espero tu respuesta.

[Mikmoro]

Dos cosas, Estíbaliz:

1.- No acabo de entender por qué ponías 275px de ancho a cada una de las dos celdas principales, si luego resulta que tú lo querías ver al ancho total de pantalla dividido en 2, como se veía tu ejemplo en IE6.

2.- De la misma manera, me decías que la tabla tenía ancho fijo, pero luego ese ancho fijo no aparece por ninguna parte en tú código.

En definitiva, que no tengo ni idea de qué querías hacer finalmente. Te he hecho un ejemplo con dos cajas al 50% ocupando toda la pantalla, según lo que dijiste en tu última respuesta. Si no era eso, tendrás que ser más clara.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>estibaliz2006</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<style type="text/css">
* {margin:0;padding:0;}
.tabla {}
.celda {width: 50%;float: left;}
.celda .titulo {text-align: center;padding: 10px;}
.celda img {padding-right: 5px;float: left;width: 100px; height: 100px;}
.text1, .text4 {padding-left: 15px; border-left: 1px dotted #CCC;display: block;margin-left: 100px;}
.text4 {margin-top: 6px;}
.textenlace2 {display: block;margin-left: 115px;}
</style>
</head>
<body>
<div class="tabla">
<div class="celda">
<div class="titulo">
<a class="textenlace0" href="javascript:popup('verpto.php?id=5');">Grabad ora Dvd Samsung 18x SATA</a></div>
<img src='mini.php?img=productos/grabadora.jpg&alto=100&ancho=100' border=0></td>
<span class="text1">69,00 € Euros</span>
<span class="text4">Reproductor de DVD±RW (±R DL) / DVD-RAM
Tipo incluido Interna
Colo... </span>
<a href=# class="textenlace2">[+] Más detalles</a>
</div>
</div>

<div class="tabla">
<div class="celda">
<div class="titulo">
<a class="textenlace0" href="javascript:popup('verpto.php?id=4');">IMPRES ORA MULTIFUNCION BROTHER (FAX) MFC3360C</a></div>
<img src='mini.php?img=productos/impresora1.jpg&alto=100&ancho=100' border=0>
<span class="text1">350,00 € Euros</span>
<span class="text4">Funciones: Copier, FAX Machine, Printer, Scanner Tipo de interfaz: USB... </span>
<a href=# class="textenlace2">[+] Más detalles</a>
</div>
</div>

<div class="tabla">
<div class="celda">
<div class="titulo">
<a class="textenlace0" href="javascript:popup('verpto.php?id=5');">Grabad ora Dvd Samsung 18x SATA</a></div>
<img src='mini.php?img=productos/grabadora.jpg&alto=100&ancho=100' border=0></td>
<span class="text1">69,00 € Euros</span>
<span class="text4">Reproductor de DVD±RW (±R DL) / DVD-RAM
Tipo incluido Interna
Colo... </span>
<a href=# class="textenlace2">[+] Más detalles</a>
</div>
</div>

<div class="tabla">
<div class="celda">
<div class="titulo">
<a class="textenlace0" href="javascript:popup('verpto.php?id=4');">IMPRES ORA MULTIFUNCION BROTHER (FAX) MFC3360C</a></div>
<img src='mini.php?img=productos/impresora1.jpg&alto=100&ancho=100' border=0>
<span class="text1">350,00 € Euros</span>
<span class="text4">Funciones: Copier, FAX Machine, Printer, Scanner Tipo de interfaz: USB... </span>
<a href=# class="textenlace2">[+] Más detalles</a>
</div>
</div>

</body>
</html>

[estibaliz2006]

gracias de nuevo. voy a ver si puedo maquetarlo a lo que busco...un millón de gracias