tablas o div's

[Black_River]

Hola foreros!

Hasta qué punto son más interesantes las div's que las tablas?

Sí, son más ligeras y ocupan menos bytes que las tablas. Sin embargo, a veces, entre estilos y tal, tampoco hay taaanta diferencia. Las tablas, a su favor, tienen que son más fáciles de colocar...

Podríamos debatir sobre las dos opciones?

Espero sus puntos de vista! ;)

[manumaf]

Hola, este tema ya fue tratado pero es bueno oír opiniones nuevas.
Las tablas te pueden dar un maquetación firme, práctica y rápida de hacer pero también tiene varias contradicciones. Si la página que estas desarrollando lleva mucho código de programación es mas conveniente usar divs ya que hacer las tablas directamente desde el código es mucho mas complicado ya que te quedan tr y td dando vueltas por hay, en cambio las divs hacen un código mucho mas limpio.
Yo creo que para la maquetación web se deben usar divs por que las tablas tiene una función que es mostrar datos ordenadamente y no darle forma y organización a la página.
Las divs por mas que tengas un largo código CSS ocupan mucho menos bytes que las tablas.

[guille_el3]

Bleh, antes de pensar en las facilidades prácticas que unas y otras nos dan, creo que habría que remontarse a su origen.
El html es un "lenguaje" (me tomo la licencia de llamarlo lenguaje) declarativo creado para describir contenidos, hipertexto. Ergo, cada tag o markup de este lenguaje tiene un significado o semántica que describe contenido.
De esta manera podemos decir que las tablas html fueron hechas para hacer tablas. Y los divs para hacer divisiones de contenido.

Si nos remontamos a eso, segun la intencion original de html, la forma correcta de maquetar páginas es mediante el uso de divs.

Ok, siendo realistas, no hace mucho que son útiles los divs, a partir del surgimiento de el css. Hasta ese entonces las tablas fueron una buena opción.

Sin embargo, actualmente hay gente que use tablas o divs, abusa de ambos porque no se da cuenta del poder que le atribuyen las hojas de estilos. Hay dos cosas que no ayudan:
1) la gente no se acostumbra a que css puede aplicarse a más que a divs y tablas, y son aquellas personas que si se dan cuenta quienes sacan el verdadero jugo a html y los buscadores.
2) hace poco con la salida del Ie7 recien puede verse un acercamiento a los estándares(aunque bastante lejano todavia), lo que hace complicada la maquetacion con divs.

[Mikmoro]

Hay mucha mucha literatura al respecto, por eso voy a poner un simple ejemplo:

imagina que has maquetado con una tabla con 6 columnas porque lo necesitas en el pie. La columna principal en el cuerpo del contenido ocupa 2 de las columnas, por lo que esa celda tiene un colspan 2. Cuando decides cambiar tu diseño, de repente quieres que esa columna ocupe el doble de ancho, y entonces debes editar cada html para cambiar el colspan 2 por colspan 4. Si lo hubieras hecho con cajas, editas la css, le dices a esa caja que ocupe el doble de ancho (y quizá a la de al lado que ocupe la mitad), y el cambio corre en cascada por toda la web.

Es sólo uno de los millones de ejemplos de como css es más práctico para maquetar que cualquier tabla.

[Black_River]

Gracias por sus primeras aportaciones.

Mikmoro, si llevas una página con muuuchas paginas html lo puedo llegar a entender. Sin embargo, si utilizas PHP y la mayoría de las páginas son "iguales" ya que muestras el contenido de una base de datos... Con cambiar una página vale ya que las demás se crean en base a esa.

Y otra cosa... Qué ventaja tiene (al crear la base de la página) utilizar 5 divs (cabecera, menu izq, menú dercho, contenido y pie) a poner una tabla con las 5 celdas mencionadas?

Cómo lo ven?

[Mikmoro]

Bueno, como te he dicho era un pequeño ejemplo, en el que no hablaba de PHP, Ajax ni máquinas virtuales de Java o iframes, sino de tablas o cajas en html.

En mi caso creo que hay algunas ventajas: siento que tengo mucho más control con las 5 cajas que con las tablas, y el dibujado siempre será más rápido en los navegadores. El código será más económico y probablemente podré hacer una página más accesible (lectores de pantalla, navegadores de texto, braile, etc.), y por supuesto más semántica para las personas y los buscadores.

Mikel.

[Black_River]

Hola de nuevo,

Pongo un pequeño ejemplo de lo que puede suceder con los divs entre Mozilla Firefox y IE: http://www.fmsite.net/index%20div.php

Visualizar la página con ambos navegadores y vereis como en IE es... un desastre. en el FFox me crea márgenes extraños (vease la parte derecha del div rojo)...

Con unas tablas, sin embargo, que coincidan las cosas son más sencillas. Con los divs siempre hay que depender de con qué navegador lo visualizas.

Qué podeis decirme de esto? O es que la codificación y el CSS está mal?

Saludos!

[Mikmoro]

Sí, efectivamente la css está bastante mal. Un par de ejemplos: así no se puede centrar la página

#wraper{
width:900px;
border: 1px #000000 solid;
background-color: #870712;
margin: 0 0;
/*padding-left: 1px;
padding-right: 1px;*/
text-align: left;
height: 100%;
}

o esta propiedad está mal escrita y no hace nada:

margin: 0 1 0 1;

Es muy fácil tener errores en la css, y bastante difícil diseñarla para que sea bien compatible entre navegadores.

Te puedo decir que con poca experiencia, es más fácil obtener un resultado aceptable con tablas que con cajas, lo que nos puede llevar a pensar que todo es más sencillo con tablas y funciona mejor. Pero también es mucho más sencillo apañar un simple html que php, y eso no significa que sea mejor crear webs con html en lugar de php, sino que uno precisa más conocimientos y experiencia que el otro.

No me parece un ejemplo muy válido porque lo ha hecho alguien con muy poca experiencia en css.

No sé si me explicado bien.

Hay por ahí un documento muy majo sobre las 10 razones para no diseñar con tablas, pero no recuerdo dónde. Si por favor alguien se acuerda que ponga el enlace.

De momento no he encontrado ese pero al menos he encontrado este otro

EDITO: lo he encontrado

Mikel.

[Black_River]

Aupa Mikel,

ya había leido ayer ese de stupid tables, la verdad está muy bien.
Bueno, pues a estudiar CSS.

Estoy desviando un poco el tema... si veis conveniente, abro un tema nuevo para esto.
El caso es que he conseguido hacer que se muestre bien en FFox la página que os adjunté. Sin embargo, en IE no sé qué pasa, si los pixels no miden lo mismo o qué :p pero se me desencaja totalmente.

Echad un vistazo: http://www.fmsite.net/index%20div.php

Gracias!

[daPhyre]

Muy interesante ese link. Ya sabía practicamente todo esto, pero luego no es sencillo explicar a los demás todo esto. Creo que esta es una buena forma de mostrarle a todos la información y además de una foram atractiva

[Mikmoro]

Un ejemplo que se ve prácticamente igual en FF que en IE6 (siempre quedan pequeños retoques):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<title>black-river</title>
<style type="text/css">
* { margin: 0; padding: 0;
}
body { background-color: #F0F0F0;
background-image: url(images/V5/background-degradado.jpg);
background-position:top;
background-repeat: repeat-x;
text-align: justify;
font: 11px Verdana, Arial, Helvetica, sans-serif;
margin: 0 0;
}
img {border: 0px; }

a:link, a:visited, a:active { color: #3C3C3C;
text-decoration: none;
}
a:hover { color: #8A1010;
text-decoration: underline;
}
#wraper { width:900px;
border: solid 1px #000;
background-color: #870712;
margin: 0 auto;
text-align: left;
height: auto;
overflow: auto;
}
#cab-user { background-image: url(images/V5/top-black.jpg);
border-bottom: 1px solid #FFF;
height:15px;
width:898px;
margin: 0 1px 0 1px;
}
#cabecera { background-image: url(images/V5/cabecera.jpg);
background-repeat: no-repeat;
height:126px;
width:898px;
margin: 0 1px 0 1px;
}
#menu-izq { margin: 0 0 0 1px;
background-color: #C9C9C9;
background-image: url(images/V5/menu-izq-bottom.jpg);
background-repeat: no-repeat;
width: 145px;
height: 500px/*auto*/;
float: left;
}
#menu-der { margin-right: 1px;
background-color: #C9C9C9;
/*background-image: url(images/V5/menu-izq-bottom.jpg);
background-repeat: no-repeat;*/
width: 141px;
height: 500px/*auto*/;
float: right;
}
#sub-cab { /*background-image: url(images/V5/sub-cab-ovalado.jpg);*/
background-repeat: no-repeat;
background-color: #fff;
margin: 0 1px 0 0;
}
#content { background-color: red;
margin: 0 142px 0 146px;
}
</style>
</head>
<body>
<div id="wraper">
<div id="cab-user">a</div>
<div id="cabecera">a</div>
<div id="menu-izq">a</div>
<div id="sub-cab">Aqu&iacute; van unos cuantos anuncios<br>
aaanuncios </div>
<div id="menu-der">a</div>
<div id="content">Aqu&iacute; va todo el contenido<br>
wow wow wow<br>
&iexcl;&iexcl;&iexcl;Qu&eacute; contenido!!!</div>
</div>
</body>
</html>

La mala noticia como conclusión de este hilo es que te vas a tener que currar mucho css para conseguir con xhtml y css la página que tenías ya hecha.

Espero que este ejemplo te sirva de guía.

Mikel.

[franko1809]

Bueno mi deduccion a todo es que para utilizar div's hay que estar un nivel avanzado de css, por ahora a utilizar tablas y poco a poco ir aprendiendo css para finalmente utilizar div's

[Mikmoro]

No, no tan avanzado, pero hay que leer, probar, buscar, etc., como con cualquier otra cosa.

Mikel.