Foros del Web » Creando para Internet » CSS »

como convertir las tablas

Estas en el tema de como convertir las tablas en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 01/08/2008, 03:21
Avatar de estibaliz2006  
Fecha de Ingreso: noviembre-2006
Mensajes: 439
Antigüedad: 11 años
Puntos: 1
como convertir las tablas

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?
  #2 (permalink)  
Antiguo 01/08/2008, 03:31
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: como convertir las tablas

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.
__________________
Visita mi nueva web idplus.org
  #3 (permalink)  
Antiguo 01/08/2008, 03:42
Avatar de estibaliz2006  
Fecha de Ingreso: noviembre-2006
Mensajes: 439
Antigüedad: 11 años
Puntos: 1
Respuesta: como convertir las tablas

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
  #4 (permalink)  
Antiguo 01/08/2008, 04:05
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: como convertir las tablas

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.
__________________
Visita mi nueva web idplus.org
  #5 (permalink)  
Antiguo 01/08/2008, 04:08
Avatar de imagen021  
Fecha de Ingreso: julio-2008
Ubicación: A Coruña
Mensajes: 74
Antigüedad: 9 años, 4 meses
Puntos: 1
Respuesta: como convertir las tablas

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!!
  #6 (permalink)  
Antiguo 01/08/2008, 04:11
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: como convertir las tablas

Cita:
Iniciado por imagen021 Ver Mensaje
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:

Cita:
de tal modo que el sistema muestra los productos en 3 columnas
Sin embargo esta otra lo aclara:

Cita:
cuando en la primera fila ya ha mostrado los 3 productos en su respectiva columna
__________________
Visita mi nueva web idplus.org
  #7 (permalink)  
Antiguo 01/08/2008, 05:22
Avatar de estibaliz2006  
Fecha de Ingreso: noviembre-2006
Mensajes: 439
Antigüedad: 11 años
Puntos: 1
Respuesta: como convertir las tablas

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>"
  #8 (permalink)  
Antiguo 01/08/2008, 09:08
Avatar de estibaliz2006  
Fecha de Ingreso: noviembre-2006
Mensajes: 439
Antigüedad: 11 años
Puntos: 1
Respuesta: como convertir las tablas

alguna ayuda?
  #9 (permalink)  
Antiguo 01/08/2008, 09:25
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: como convertir las tablas

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?
__________________
Visita mi nueva web idplus.org
  #10 (permalink)  
Antiguo 01/08/2008, 09:50
Avatar de estibaliz2006  
Fecha de Ingreso: noviembre-2006
Mensajes: 439
Antigüedad: 11 años
Puntos: 1
Respuesta: como convertir las tablas

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><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><class=textenlace0 href=javascript:popup('verpto.php?id=4');>IMPRESORA MULTIFUNCION BROTHER (FAXMFC3360C</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>FuncionesCopierFAX MachinePrinterScanner Tipo de interfazUSB... </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><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><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
  #11 (permalink)  
Antiguo 01/08/2008, 10:08
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: como convertir las tablas

Cita:
Iniciado por estibaliz2006 Ver Mensaje
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.
__________________
Visita mi nueva web idplus.org
  #12 (permalink)  
Antiguo 01/08/2008, 10:19
Avatar de estibaliz2006  
Fecha de Ingreso: noviembre-2006
Mensajes: 439
Antigüedad: 11 años
Puntos: 1
Respuesta: como convertir las tablas

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...?
  #13 (permalink)  
Antiguo 01/08/2008, 10:31
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: como convertir las tablas

Cita:
Iniciado por estibaliz2006 Ver Mensaje
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.
__________________
Visita mi nueva web idplus.org
  #14 (permalink)  
Antiguo 01/08/2008, 10:42
Avatar de estibaliz2006  
Fecha de Ingreso: noviembre-2006
Mensajes: 439
Antigüedad: 11 años
Puntos: 1
Respuesta: como convertir las tablas

mil gracias por tu ayuda....espero impaciente...gracias otra vez
  #15 (permalink)  
Antiguo 01/08/2008, 10:53
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: como convertir las tablas

Una pregunta importante: ¿lo quieres tener como se ve en Firefox o como se ve en IE6?
__________________
Visita mi nueva web idplus.org
  #16 (permalink)  
Antiguo 01/08/2008, 11:56
Avatar de estibaliz2006  
Fecha de Ingreso: noviembre-2006
Mensajes: 439
Antigüedad: 11 años
Puntos: 1
Respuesta: como convertir las tablas

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....
  #17 (permalink)  
Antiguo 01/08/2008, 16:22
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: como convertir las tablas

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.
__________________
Visita mi nueva web idplus.org
  #18 (permalink)  
Antiguo 02/08/2008, 02:39
Avatar de imagen021  
Fecha de Ingreso: julio-2008
Ubicación: A Coruña
Mensajes: 74
Antigüedad: 9 años, 4 meses
Puntos: 1
Respuesta: como convertir las tablas

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!!
  #19 (permalink)  
Antiguo 02/08/2008, 05:12
Avatar de estibaliz2006  
Fecha de Ingreso: noviembre-2006
Mensajes: 439
Antigüedad: 11 años
Puntos: 1
Respuesta: como convertir las tablas

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.
  #20 (permalink)  
Antiguo 02/08/2008, 08:55
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: como convertir las tablas

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.

Cita:
<!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>
__________________
Visita mi nueva web idplus.org
  #21 (permalink)  
Antiguo 02/08/2008, 09:41
Avatar de estibaliz2006  
Fecha de Ingreso: noviembre-2006
Mensajes: 439
Antigüedad: 11 años
Puntos: 1
Respuesta: como convertir las tablas

gracias de nuevo. voy a ver si puedo maquetarlo a lo que busco...un millón de gracias
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 01:48.