Diseño web con tablas o con capas?

Capas o Divs? Al margen del uso de Flash y otras historias, solo se me ocurren dos modos de crear la estructura de una página web. Me refiero al esqueleto, el esquema o entramado con el que dividimos mentalmente una página web dejando huecos para tal y cual elemento (como logotipo, menú, publicidad, etc). Estos dos modos son las tablas y las famosas capas o DIVs. Pero cuál es preferible de entre esas dos? Ambas tienen sus ventajas e inconvenientes, como casi todo. Voy a ir escribiendo las que se me ocurran y espero que participes y nos cuentes las que tengas en mente, oki? Si empezamos a crear una página web colocando elemento tras elemento sin más, estos apareceán normalmente ordenados de arriba abajo, uno bajo el otro. Arriba los primeros que coloquemos dentro del código Html y al final los definidos al final de ese código. Si lo que queremos es que aprezcan en sitios concretos de la página (unos arriba a la izquierda, otros a la derecha, etc, etc) tendremos que recurrir a algún tipo de entramado o estructura, verdad? Con ambas tecnologias, tablas o capas, puedes conseguir cualquier diseño que pueda dividirse en rectángulos (aún si un elemento fuera redondo, siempre cabe dentro de un rectángulo, no?). Características comunes de capas y tablas. Pues lo dicho, con ambos métodos podemos trazar un esquema cuadriculado en el que podremos colocar todos los componentes de la web. Imagina cualquier página web, traza las siluetas de cada uno de sus elementos mentalmente y uala! Ya puedes imaginarte la estructura que necesita. Luego solo es cuestión de colocar el código Html (o el que sea) dentro de cada cuadrícula y listo. En algunos casos te encontraras con espacios huecos, sin nada. No es un problema, pues siempre puedes colocar "nada" dentro de una de esas cuadrículas, bien sea una capa o bien sea la celda de una tabla. Con ambos métodos por tanto puedes crear la web que te de la gana. Pero cuál es la mejor forma? Obviamente, la mejor es la que más controles, je je je, pero al margen de eso vamos a intentar citar algunas ventajas de cada forma. Diseño web utilizando tablas. - Son relativamente fáciles de usar. Con solo tres etiquetas, y * Todas tienen un id="algo", suponiendo que leen los etilos de una hoja de estilos. - Es fácil conseguir colocar en la parte de arriba del código Html lo que queramos, aunque luego deba aparecer más abajo. Solo haría falta usar los estilos para indicar las coordenadas donde queremos que aparezca en el navegador. Por ejemplo, puede resultar útil que el contenido aparezca justo al principio del Html para que sea lo primero que lean los robots de los buscadores. Sería algo así: - Cambiar de lugar elementos resulta muy muy sencillo a través de la hoja de estilo, sin necesidad de retocar nada del código Html. Con solo modificar las coordenadas de posición de un elemento, irá allá donde queramos. Cada capa es totalmente libre e independiente de las demás si se desea, por lo que cambiarlas de lugar o de dimensiones no tiene por qué perjudicar al resto de capas. - Es imprescindible dominar los estilos CSS. Sabes hacer flotar capas, saber colocarlas donde queramos usando posiones absolutas y relativas, conocer cómo definir la profundidad de cada una de ellas para que aparezcan una sobre otra, etc, etc, etc. No hace falta ser genios en CSS, pero está claro que cuanto más sepas, menos tiempo vas a perder y menos dolores de cabeza tendrás cuando no te salga algo como quieres. Más información sobre las capas o divs. Conclusión: En definitiva, creo que con ambos métodos se puede conseguir exáctamente lo mismo, aunque creo que las capas dan mucho más juego y posibilidades, especialmente cuando entran en juego contenidos dinámicos. Yo tengo páginas web con tablas unas y con divs otras y realmente no noto diferencia en cuanto a posicionamiento, pero por si acaso, optaría por las capas. Si te animas a aprender cualquiera de las dos metodologías, te invito a leer cómo crear una web desde cero usando tablas y también como diseñar una web paso a paso desde el principio utilizando divs o capas. Os agradecería vuestros aportes e ideas. Entre todos seguro que aprendemos un montón! Un abrazo!

tienes la estructura lista. Quizas sea necesario el uso de colspan o rowspan para combinar algunas celdas, pero no te van a hacer falta otras etiquetas. Fácil no? Una tabla sencillita podría ser por ejemplo esta: Logotipo banner menú lateral contenido principal, textos. barra lateral derecha enlaces en el pie pie de página firma y copyright * Todas tienen un id="algo", suponiendo que leen los estilos de una hoja de estilos. - Obligan a colocar al principio del código los primeros elementos que aparecen en la página web, en orden de arriba a abajo. Esto puede no ser muy bueno si lo que pretendemos es mostrar a los robots de los buscadores primero contenidos que no están realmente en la parte superior, sino más bien en la parte media o central de la página. - Si una vez terminada queremos modificar la disposición o posición de algún elemento o celda, tendremos que modificar bastante el código html de la web, para acomodar el resto de los elementos al mover el primero. Puede ser bastante trabajoso. - Algunos dicen que a los robots de buscadores no les gusta mucho leer el código Html de las tablas. No creo que sea la cosa para tanto, aunque si creo que un diseño con capas tiene un código Html más sencillo de leer que el obtenido usando tablas. - La posición y dimensiones de una celda está limitada a la del resto de celdas. Es decir, una celda no es independiente, sino que se podrá colocar en una parte u otra según lo que le permitan las celdas de su alrededor. Más información sobre las tablas. Estructura web utilizando capas o Divs. - En cuanto a Html re refiere, la única etiqueta necesaria para usar capas es , por lo que a priori parece mucho más sencillo de usar este elemento que las tablas. La dificultad va a venir en los estilos que le definamos a cada una de ellas. Habrá que tener bien claro lo que queremos y cómo lograrlo para evitarnos calentamientos de cabeza tontos. Esto de abajo sería el código Html equivalente al de la tabla de antes: Logotipo banner menú lateral contenido principal, textos. barra lateral derecha