Div o Tabla

[juan986]

Hola, estoy tratando de mi hacer mi diseño lo mas estandar posible, pero me han surgido algunos problemitas con el put... IE 6.0

Me interesaría tener un poco mas claro cuando conviene utilizar divs y cuando tablas.

www.taluselectronics.com/zeus/ es el preview del sitio...

El problema me ocurre en el listado de los productos, que me sale cortado. Aparentemente es un tema de tamaños pero con los divs se me descuadra todo.

Mi pregunta es si me estaría bien hacer una tabla para cada item del listado.

Gracias

[bookmaster]

Usa mejor Divs, pero vigila los margin y los padding, ya que el IE no los trata de igual manera que el resto de navegadores.

Ese problema me ha traído loco en alguna que otra página, porque se me descuadraba todo y poniéndolos a 0 se corregía y ya después es jugar con los valores para que entre sin problemas.

[juan986]

Es que utilizo el padding y el margin para que me quede separado...

:S

[lbenz]

Juan... definitivamente Divs antes que tablas, porque? Posicionamiento, codigo limpio, me imagino que tu pagina va a ser para mostrar productos que vendes, para que alguien la encuentre tienen que estar bien posicionado...

Al trabajar con divs y obvio, con un archivo externo de css lograr tener un codigo limpio, esto ayuda muchisimo cuando entrar los robots de google... Obvio que el contenido de la web tambien es muy importante,,

Ahora pasando al tema que mas te compete a vos, calculo que es la aprte de maquetación del html, maquetar con tablas es muchisimo mas sencillo que con divs..

Trabajando con divs tenes que tener mucho cuidado con todas las propiedades,
como bien decia bookmaster el tema de margin y padding ie, ya sea el 6 o el 7 no lo toman como el resto de los navegadores...

yo te diria que en todos los estilso que crees pongas tus

#productos {
margin:0;
padding:0;
}


o incluso, hasta mas largo pero mas seguro...


#productos {
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}


obcio esto sumandole todas las otras propiedades de display, float, width, height, backgraund, border, etc, etc, etc, etc............ y podria seguir con los etc...

yo estuve mucho tiempo probando y probando maquetaciones para poder controlar perfectamente el tema, pero siempre termino renegando con algun que otro margin, padding diaplay o float.

te recomiendo, buscar, descargar e isntalar el multipleIE con el cual podras ver desde tu maquina las apginas con las distintas versiones de explorer.

te dejo saludos y cualquier duda escribime, que este foro de me diod e comer tanto, que ahora me toca ayduar a mi, aunque sea en loq ue puedo...

saludos

[a2a2]

Iniciado por lbenz

Juan... definitivamente Divs antes que tablas, porque? Posicionamiento, codigo limpio, me imagino que tu pagina va a ser para mostrar productos que vendes, para que alguien la encuentre tienen que estar bien posicionado...

Al trabajar con divs y obvio, con un archivo externo de css lograr tener un codigo limpio, esto ayuda muchisimo cuando entrar los robots de google... Obvio que el contenido de la web tambien es muy importante,,

...

En general estoy de acuerdo, pero en ciertas cosas no estoy de acuerdo:
- El hecho de usar tablas no implica dejar de usar CSS. Se pueden usar tablas con CSS perfectamente, estén en ficheros externos o no.
- En mi opinión el uso de divs o tablas no influye en el posicionamiento, los robots de los buscadores saben muy bien que es el contenido y que son los estilos.

[Mikmoro]

Iniciado por juan986

Mi pregunta es si me estaría bien hacer una tabla para cada item del listado.

Para mi la respuesta es sencilla: no uses tablas para maquetar tu sitio, úsalas para lo que son, es decir, para tabular datos. Antes se usaban para estructurar toda la página creando los bloques de contenido con las celdas, filas y columnas. De ahí se pasó a no usarlas absolutamente para nada, llegando a comerse la cabeza para mostrar con divs una tabla de personas, direcciones, etc.

Lo que más sentido tiene es usar divisores para estructirar la página y tablas para poner datos tabulados. Entonces la pregunta es: ¿son tus productos datos tabulados? ¿si los pusieras en un documento de word los pondrías en tablas? Si es así, ponlos en tablas; si no, usa los divs como para cualquier otro elemento de la estructura de tu web.

Es mi opinión.

Mikel.

[lbenz]

Si bien es cierto que con tablas se puede usar una hoja de estilos externa, tambien es muy cierto lo que dice mikmoro.. tablas para los que son, datos tabulares...

Y permitime corregirte, los robots, de google, por lo menos son los que tengo mas estudiados, tienden a posicionar en primer instancia por contenido, obvio, pero luego se fija muchisimo en la estructura o maquetacion del site que esta indexando y si el sitio esta hecho con divs se rankea muchisimo mejor, vale aclarar, que hay sitios hechos con divs que son mas desprolijos y sucios en codigo que sites realizados con tablas....

hace ya tiempo que me dedico a estudiar y testear ese tipo de cosas, ya que tengo variios sites implementados para Ad Sense, y no tengo ninguna duda, que una pagina bien maquetada con divs se posiciona mucho mejor que una pagina bien maquetada con tablas...

igualmente, no impongo mi opinion, justamente, foro de opiniones o debates...

Si tenes algo para corregirme sera bien recibido, con todo se aprende...

gracias

y saludos

[a2a2]

Iniciado por lbenz

...
y no tengo ninguna duda, que una pagina bien maquetada con divs se posiciona mucho mejor que una pagina bien maquetada con tablas...

Yo sinceramente no lo creo.
Y sino, ¿ Cómo interpretas ésta frase de Directrices para webmasters ?:

"Directrices Técnicas: Utilice un navegador de texto como Lynx para examinar su sitio, ya que la mayoría de las arañas lo analizan como lo haría dicha aplicación. "

Con dicho navegador, los estilos son totalmente irrelevantes.


Sin embargo, se me ocurre una explicación para los resultados que has obtenido en tus pruebas, y es que es que al estar maquetada con divs, el ORDEN del contenido normalmente es más lógico que si estuviera maquetada con tablas. Como consecuencia de ello es posible que el contenido importante esté más cerca del inicio de la página y quizá por eso se posicione mejor.

[juan986]

Gente, gracias por contestar tan rapido...

No se si vieron el link del sitio, pero si lo miran, van a ver que ahora esta absolutamente con divs, salvo para poner unos bordes redondeados.

El tema esta que en FF, Opera y IE 7.0 se ven bastante parecidos entre ellos, pero en el IE 6.0 se ve corrido.

Entonces entre a dudar si era tan necesario hacer absolutamente todo con divs y hasta que punto convenia.

Código:

<div class="lineaListadoProducto">
	<div class="imagenListadoProducto">
		<table cellpadding="0" cellspacing="0" border="0" width="150" class="tablaImagenProducto">
        	<tr>
            	<td><img src="imagenes/general/imgtl.png" alt="" width="9" height="7" class="esquinaTablaImagenProducto"/></td>
            <td class="borderTablaImagenProducto"></td>
            <td><img src="imagenes/general/imgtr.png" alt="" width="9" height="7" class="esquinaTablaImagenProducto"/></td>
        </tr><tr>';
            <td class="borderTablaImagenProducto"></td>
            <td><a href="index.php?p=productos&amp;id='.$producto['id'].'" class="nombreProducto" title="'.ucfirst($producto['marca'])." ".ucfirst($producto['modelo']).'"><img src="imagenes/' . $producto['imagen'] . '" alt="' . ucfirst($producto['marca']) . ' ' . ucfirst($producto['modelo']) . '" width="132" height="99" class="imagenDetalleProducto"/></a></td>
            <td class="borderTablaImagenProducto"></td>
        </tr><tr>';
            <td><img src="imagenes/general/imgbl.png" alt="" width="9" height="7" class="esquinaTablaImagenProducto"/></td>
            <td class="borderTablaImagenProducto"></td>
            <td><img src="imagenes/general/imgbr.png" alt="" width="9" height="7" class="esquinaTablaImagenProducto"/></td>';
        </tr></table>';
    </div>';	
    <div class="infoListadoProducto">
        <a href="index.php?p=productos&amp;id='.$producto['id'].'" class="nombreProducto" title="'.ucfirst($producto['marca'])." ".ucfirst($producto['modelo']).'">'.$producto['marca']." ".$producto['modelo'].'</a><br/>
        <p class="resumenProducto">'.rellenar($producto['resumen']).'</p>
        <p class="precioProducto">'. $producto['moneda'] . " " . $producto['precio'] .'</p>
        <p class="linksProducto"><a href="index.php?p=comprar&amp;id='.$producto['id'].'" title="Comprar"><img src="imagenes/general/btnComprar.gif" width="92" height="27" style="border:none;" alt="Comprar"/></a>&nbsp;<a href="index.php?p=producto&amp;id='.$producto['id'].'" title="Detalles"><img src="imagenes/general/btnDetalles.gif" width="92" height="27" style="border:none;" alt="Detalles"/></a></p>
    </div>
</div>

Eso sería cada linea... el tema es que utilizo mucho el margin y el padding para que me quede donde quiero...

[Mikmoro]

Antes de poder empezar a pensar en una adaptación para IE, te comento un par de cosas:

1.- Llamas dos veces a una css llamada estilo.css, una en la carpeta productos y otra fuera. Te recomiendo que cambies eso para evitar confusiones.
2.- Tienes 2 o 3 hojas de estilo para un sólo selector, lo cual es perjudicial; mételos dentro de una de las otras hojas y los remarcas con comentarios tipo /*###comentario####*/. Reduces con ello las llamadas al servidor.
3.- Tienes varias css, sin embargo tu html está absolutamente lleno de estilos incrustados en las etiquetas. Esto hace que todo sea menos eficiente y más confuso. Te recomiendo que empieces a quitar todos los estilos de las etiquetas y transfieras los que necesites a las css. Seguro que tienes cosas duplicadas o incluso en contradicción.

Mientras no hagas eso, a mi me resulta tortuoso intentar leer el código de las css y además el de las etiquetas, y no se sabe si camiar un código por otro más eficiente o para IE será efectivo o no.

Es mi consejo.

Mikel.

[juan986]

Es que lo tengo asi el código porque estoy en fase de prueba.

Cuando tenga todo ok, lo voy pasando a los css.

Hay un estilo que es el del index.php el otro estilo es de producto.