Maquetar sin tablas en XHTML

Gracias por ofrecerte, es un detalle

Muchas veces los problemas al intentar manejar el (X)HTML con CSS, usando DIV en vez de TABLE, son que intentamos hacer con el CSS lo mismo que antes hacíamos con las tablas, y son cosas diferentes.

Hace unos días un amigo me preguntaba cómo hacer que una celda midiera 1 pixel de alto para crear una separación entre la superior y la inferior, todo con CSS. Evidentemente, eso no tiene lógica. Y no porque el diseño con tablas esté prohibido con CSS, sinó porque CSS sólo es realmente potente cuando se separan contenido, estructura y presentación.

Por eso muchas veces la gente reniega del esfuerzo que supone aprender CSS (y código válido), porque no se trata aprender algo añadido a lo anterior, sino cambiar desde cero la manera de construir el código (X)HTML (estructura) y el CSS (presentación), porque los programas WYSIWYG nos enseñaron que HTML era un lenguaje gráfico o de presentación, y en realidad es un lenguaje lógico.
Aún así, animo a todo el mundo que desarolle usando CSS y XHTML, porque da muy buenos resultados.

PD. Josh, debo ser el único ser mortal que se ha leído la especificación de CSS2 completa unas dos o tres veces, así que si necesitas ayuda, dame un silbidito (o escribe en el foro o envíame un mail a NoNameCo[a]Terra.es).

PPD. Con CSS3 se avecina una bien gorda. En el módulo de colores, por ejemplo, se está desarrollando de manera que CSS3 permita usar los colores en hexadecimal, como RGB (Rojo, verde y azul), RGBA (RGB con alpha, transparencia), HSB (Color, brillo y saturación), HSBA (HSB con transparencia), además de que existirán más de 140 colores con nombre propio, frente a los dieciséis que existen ahora. O sea que si no queréis quedaros atrás, empezad a aprender CSS2 ya!

Yo no estoy muy familiarizado con el tema, podeis poner algún link con elemplos o darme alguna dirección de web que lo utilice para que vea más exactamente cómo se hace.

¿A qué te refieres Orange con <em>ejemplos de cómo se hace</em>?

Soy un arcaico por lo que se ve, todavía maqueto con tablitas, me esta interesando lo que contais y me gustaría saber más sobre CSS2 (y 3?) y lo de maquetar con Divs

Tienes razón, es una historia totalmente distinta. Estamos acostumbrados a maquetar webs apilando tablas y sims. Aunque una vez uno se acostumbra, en realidad es mucho más cómodo con divs.
Mi quebradero de cabeza viene de las diferentes implementaciones del box model en cada navegador.
Nada más acabe lo que estoy haciendo lo cuelgo para que veáis como ha quedado.

Orange, yo he aprendido buscando en google "css layouts". No es el mejor metodo pero si mejor que leerse la especificacion como co XD

Creo que voy a esperar a que cuelgues la web y me la empollaré un poco, porque ahora no tengo el tiempo suficiente como para ponerme a filtrar documentación.

A ver, voy a intentar hacer una pequeña introducción de lo que es este nuevo movimiento (o moda) del <em>Tableless Layout</em>:

En principio, las tablas son elementos lógicos para mostrar datos tabulados, ésto es, tablas de datos, como listas de precios o tablas comparativas.
Los primeros diseñadores de web, eran diseñadores gráficos reciclados, acostumbrados a disponer elementos en una posición exacta en un espacio físico concreto. Al encontrarse el HTML, que era un lenguaje lógico con un control de la presentación arcaico, se usaron las tablas para emular el sistema de rejillas o cuadrículas (en inglés grids), muy extendido en diseño gráfico. Manipulando contenido e imágenes dentro de tablas, se conseguían tanto rejillas estáticas, como rejillas fluidas. Eso, en parte, salvó un poco la papeleta de aquellos diseñadores.

Con la popularización del diseño web, los editores WYSIWYG adoptaron este uso incorrecto de las tablas, que en su peor uso, fue la maquetación con tablas de imágenes partidas que formaban interfaces gráficas (los documentos HTML que crean Adobe ImageReady© o Macromedia FireWorks© entre otros).

Con la creación de las Hojas de Estilo en Cascada (CSS), se cambió el concepto de HTML como lenguaje de estructura y presentación, ya que la presentación se controlaba mucho mejor con CSS. Luego XML, y el intento del W3C por intentar hacer que el HTML volviera dentro del SGML, crearon el XHTML, versión adaptada de HTML que elimina por completo su aspecto de presentación. Entonces se creó CSS2 que intentaba afinar más el control de la presentación.

Como actualmente el CSS1 está totalmente soportado, y el CSS2 está en proceso de implementación (todos los navegadores lo soportan aunque sea parcialmente), y el XHTML es un lenguaje óptimo para usar CSS en todas sus posibilidades, nace esta especie de movimiento que reivindica eliminar las tablas como elementos compositivos.

Pero como aún muchos diseñadores usan mentalmente un esquema de cuadrículas, se usa el sistema de DIVs (capas). Los DIV se usan básicamente para englobar elementos (un DIV para la cabecera, por ejemplo), dando un control bastante parecido a las celdas de las tablas, pero mucho más lógico y libre.

La diferencia entre los DIV y las tablas, es que las tablas eran una cuadrícula real, y los DIV son elementos cuadrados sin relación entre ellos, con lo que se empieza a dar más importancia al posicionamiento y alineación.

O sea que para crear un <em>Tableless Layout</em>, lo mejor es empezar haciendo un código válido (H1, P, UL, OL, DL, DIV, ...) y lógico, y a partir de ahí añadir los DIV para englobar los elementos en conjuntos o grupos o zonas. Entonces estos DIV se pueden manipular para crear la presentación, alineándolos, posicionándolos absoluta o relativamente, etc...

Espero que te sirva de ayuda ;)

Si lo que quieres son ejemplos prácticos, en Meryl tienes más de 900 enlaces a páginas hechas sin tablas con CSS. También te recomiendo The Noodle Incident, con ejemplos de layouts, trucos y hacks (aunque no recomiendo el uso de hacks), o el weblog de Mini-d, que además de tener posts sobre el tema, tiene un diseño muy bueno. También hay artículos sobre el tema en A List Apart.

Yo personalmente te recomiendo (y mucho) que lo intentes porque da muy buenos resultados. Además, acostumbrarse a crear código válido te permitirá crear sitios que no tengan problemas (o que degraden correctamente) en todos los navegadores actuales y anteriores. Además, si le echas un ojo a las especificaciones de XHTML2 o CSS3 que se están creando, verás que va a ser muy importante dominar XHTML y CSS para cuando los navegadores empiecen a soportar éstas tecnologías, ya que suponen un cambio increíble, junto con el DOM2; aunque para esto aun faltan unos años (no muchos).

PD. Orange, espero que hayas llegado hasta el final :D

Trato de llegar al final de todos los mensajes ;), sobre todo porque yo también suelto rollos de vez en cuando.

Lo que era un DIV y esas cosas ya las sabía, y por lo que habíais hablado me imaginaba que los tiros iban por ahi.

Me preocupa la presentación entre navegadores, porque si pongo un DIV, con una posición en pixeles ¿me lo respeterán todos por igual?.

Le voy a echar un ojo a las paginas a ver que tal.

Muchas gracias!

Muy interesante la historia de la maquetacion con tablas, cø.
Yo sigo pensando que la maquetación divs/css tiene serias deficiencias.
Me falta p0oco para acabar mi primera maquetación con divs ;)

Yo creo imprescindible el aprender xhtml y css para saber hacer un buen diseño web. Al igual que lo fue el aprender html.

Pero la aplicación no es obvia.

Un punto importante es que las imágenes siempre tienen un tamaño en pixels dado, y a la hora de diseñar con imágenes, no puedes hacer un diseño puramente elástico y controlar un mínimo la apariencia. Así que cuando hay muchas imágenes siempre te encuentras con que diseñas para un tamaño específico ( 800x600 ó 1024x765 ó lo que sea). Así que intentar pelearte con divs y anchuras variables no siempre tiene sentido. Así que la opción del uso de tablas es pertinente.

Cuanto más se separa el contenido de la presentación más facil de mantener y de entender. Cierto, así que utilicemos CSS para controlar al máximo la apariencia de las tablas cuando realicemos un diseño basado en imágenes.

Ayer colgué los resultados ;)

AQUI