Una de las novedades más esperadas de CSS 3 es la posibilidad de definir que cualquier elemento de una página se comporte como parte de una tabla. Con esto podremos hacer que un div pueda tener algunas caracteristicas muy deseadas que ya poseían las celdas de una tabla (sobre todo el centrado vertical, por lo menos en mi caso).
Con esta nueva característica han surgido voces que han empezado a hablar de una nueva forma de componer estructuras de página, sin flotes, sin tantos jaleos, otorgándole a nuestros divs esas cualidades de tabla pero sin llegar a volver a maquetar con tablas.
Es un lío, desde mi punto de vista suena raro ya desde el mismo principio. Salimos en desbandada de las estructuras montadas sobre tablas para volver a algo igual pero puede que incluso más complicado.
Puede que gracias a una inteligente estrategia de marketing, el libro editado por Sitepoint “Everything you know about CSS is wrong” (del que podéis leer un capítulo en Digital Web Magazine, en inglés) se ha extendido como la pólvora la idea de que el futuro está en esta maquetación con pseudo-tablas.
Hasta ahora no había leído más que piropos a esta aproximación y me había reservado mi opinión (no me gusta la idea) para cuando pudiera trabajar más con la idea, siempre pensando que al no haberla probado demasiado no podía juzgar. Pero hoy me entero vía CSS Tricks de que gente tan importante como Eric Meyer pone en entredicho esta idea por poco semántica y por volver a dejarnos atados al orden dentro del código fuente para mostrar los elementos. Por no hablar de la falta de compatibilidad hacia atrás (y si, sé que todo el mundo debería llevar el navegador en la última versión pero también sé que es utópico creer que sucederá).
Como ya digo, para mí la idea es una locura. Prefiero seguir peleandome con los elementos flotados que empezar a falsear elementos y tener que editar el HTML cada vez que quiera cambiar algo de sitio (¿no era esa una de las ventajas de dar estilo con CSS?), pero ¿y vosotros? Maquetación con tablas CSS ¿si o no?
Si te ha gustado este post no olvides suscribirte al feed para estar al tanto de las novedades
[...] Maquetación con tablas CSS, ¿si o no? – Una de las novedades más esperadas de CSS 3 es la posibilidad de definir que cualquier elemento de una página se comporte como parte de una tabla. Con esto podremos hacer que un div pueda tener algunas caracteristicas muy deseadas que ya poseían las celdas de una tabla (sobre todo el centrado vertical, por lo menos en mi caso). [...]
[...] Maquetación con tablas CSS, ¿si o no? [...]
Feed RSS de los comentarios de este post.
Alojado en RedCoruna Hosting
¿Quieres hasta 6 meses de hosting gratis? Utiliza el cupón RCwebmasterlibre al contratar cualquier plan con RedCoruna - más información
Seguir @webmasterlibre
Mientras que con tablas tardas 5 minutos en maquetar una pagina completa, con div y float tardas mucho mas, a poco que la pagina sea compleja.
A mi me parece una buena aproximacion, lejos de la moda de hacerlo todo con div’s , aunque para que hacer se un div sea como una tabla y ya tenemos tablas??
Maquetar con divs no es una moda si no la forma correcta, por el momento, de hacerlo. La tabla es un elemento que semánticamente significa la presentación de una serie de datos de forma ordenada. Los divs, en cambio, son elementos sin significación y, por tanto, los idóneos para esa labor.
Además, maquetar con tablas trae consigo importantes desventajas. La primera el tiempo que podrías tardar en, por ejemplo, cambiar de lado un menú (algo que con CSS te llevaría 2 segundos). Luego cosas tan tontas como perder posicionamiento en los buscadores al colocar el contenido después de un menú o un bloque sin importancia, causar problemas a los usuarios de lectores de pantalla que se vuelven locos para navegar por la estructura, aumentar el peso de la página etc.
La maquetación con tablas CSS pretende ser una alternativa intermedia: rapidez maquetando sin utilizar de forma errónea el elemento table de HTML, a pesar de todo sigue sufriendo algunas de las desventajas de la maquetación con tablas.
Vale. Es interesante ampliar las posibilidades de las CSS, pero antes de dar un punto de opinión me encargaré de explorar más sobre el tema.
Apoyo lo que dices de las versiones de navegadores. Es imposible lograr que todos tengan la última versión (y más, lograr que instalen un buen browser.. jejeje). En ocasiones nos ha tocado cambiar toda la maquetación CSS por tablas.
Sigamos investigando y probando.
Hola Alma, estoy de acuerdo contigo, no me convence para nada ese método. La verdad es que no había oído hablar de ello, últimamente estoy un poco desconectado de estos temas.
Yal hilo del primer comentario, me llama la atención que hay mucha gente que llama a la maquetación pura por css “maquetación con divs”, por lo que las opciones se resumen en “maquetar con tablas” y “maquetar con divs” y terminan haciendo una página llena de divs igual de poco semántica que una con tablas.
No les entra en la cabeza usar otros elementos como las listas…uuuh!…¿qué es eso de <ul>? :_DDD
Qué razón tienes Pablo, puede que por eso el primer artículo que se hizo popular de este blog fuese Div Manía
Realmente el orden no importa si lo hacemos en CSS “normales” ? de esta misma pagina yo si cambio el orden de algunas capas, pocas cosas se quedarian en su sitio. Ademas, nadie dice que utilices ese sistema de pseudotabla para toda la web, utilizalo cuando sea util y no comprometa nada que no este compremetido ya en el CSS “normal”.
Un Saludo
Hola Alma.
Pues yo utilizó ambas formas Div’s y Tables, como decimos aquí en México, “ni tanto que queme al Santo ni tanto que no le alumbre”. Si se me complica maquetarlo con Div pues lo meto a una tabla sobre todo por la urgencia y si queda tiempo trato de ponerlo en div’s.
Saludos.
bueno para quienes llevamos años maquetando, es una real burrada, utilizar elementos de mala manera por que total lo solucionamos con un poquito de CSS.
no creo que las tablas sean malas, lo que es malo es como se usaban antes, donde tablas dentro de tablas era un desastre. pero las mismas siguen siendo fundamentables a la hora de representar datos tabulados como una grilla de contenidos o una tabla de datos.
hacer lo mismo con ul li, dl dt dd, o div o lo que fuere esta mal el planteamiento de la estructura.
si bien puede ser de gran utilidad esta herramienta, espero que no sea mal utilizada
saludos
En realidad en la especificación CSS 2.1 ya se nos da la posibilidad de dar a cualquier elemento el coportamiento de una celda, fila, tabla, etc. mediante la propiedad “display” que admite los valores, entre muchos otros: “table”, “table-cell”, “table-row”, “table-caption”…., pero son poco usados porque no los soportan algunos navegadores antiguos (seré feliz cuando podamos dejar de maquetar para IE6).
De todas formas estoy de acuerdo contigo, lo encuentro un paso atrás y se me ocurren ya pocos casos puntuales en los que podría ser útil dar el comportamento a un elemnto de una celda o de una tabla de datos, pero en ningún caso tratar a todos los elementos que dan estructura como elementos de una tabla.
Con CSS3 vendrán muchas más cosas interesantes y útiles, como la posibilidad de usar columnas, que nos harán olvidar rápidamente el engorro de usar tablas o falsas tablas para maquetar, espero.
Lamentablemente se confundió en un pasado las tablas de datos con las retículas y actualmente se confunden los div por “capas”, cuando los div son divisores de contenido, separadores de secciones en una página o lo que es lo mismo agrupadores de elementos comunes, para dar estructura y sentido a esos elementos mediante un identificador, clases o ambas.
Estoy deseando que salga ya CSS3 y HTML5, que muera IE6, que IE8 venga con un sistema de actualización parecido a Firefox, que se acabe el hambre en el mundo, que se acabe la crisis, que haya paz en oriente medio, que no se derrita la Antártida…
Un saludo y a seguir soñando!
En mi opinión hay que leer con más detenimiento el artículo de Eric Meyer, en CSS-Tricks se quedaron con la parte que les interesó…
En lo que más insiste es en que hay que encontrar un nuevo sistema de hacer maquetaciones avanzadas, porque hay muchas cosas que no se pueden hacer con CSS hoy en día (o si se pueden hacer, cuesta Dios y ayuda y hay que hacer mil trampas en el CSS cuando deberían ser cosas triviales)
Por otra parte lo que critica es usar pseudo tablas y el
display: table-cell,pero no critica la idea del W3C del css advanced layout, de hecho se queja un poco de que no ha habido interés en implementar esto último.La idea del layout avanzado en sí misma no es mala, ya que sí sería independiente del marcado, se trata de definir regiones (cabecera, pie, columnas, etc.) de una forma bastante más lógica que el sistema actual, y se definirían en el CSS, no alteraría el marcado.
Una vez más, hay que acudir a la fuente original:
http://www.w3.org/TR/css3-layout/
De todas maneras, mucho tiempo tardarán nuestros ojos en ver estas cosas…
Gonzalo, a mi en concreto lo de definir regiones me parece muy interesante. A día de hoy creo que casi todos optamos por hacer algo tipo div id=”cabecera” y una estandarización a ese respecto sería excelente (no sólo para navegar las webs si no para extraer contenido de ellas etc.). Pero como dices, tardarán nuestros ojos en verlo.
Invidia, tienes razón que en CSS2 ya está disponible mediante display, se me fue un poco la olla pero me da que entendí que con CSS3 sería más potente o algo así (puede que sea una ida de olla mia ya te digo).
Y sobre lo de actualizar IE, mientras Microsoft considere necesario validar licencias y esas historias seguiremos arrastrando navegadores antiguos, quizá sea más fácil ayudar a la gente a entender que lo de tener un Windows pirata no es buena idea que conseguir que Microsoft se preocupe por hacer algo con el navegador.
emilio claro, las tablas usadas para lo que son son una maravilla. Para mostrar datos tabulares, que es para lo que se pensaron.
daniel, el problema con hacer una aproximación intermedia es que depende de la paciencia del maquetador. Igual donde tu ya usas una tabla yo sigo trabajando por no hacerlo o al revés. En los últimos años sólo he maquetado con tablas boletines de correo y todo gracias a los saltos alante y atras de los clientes de correo electrónico.
Javier, si yo quisiera poner el menú laterla a la derecha no tendría que tocar el código fuente. El orden del código sería el mismo pero visualmente, con las hojas de estilo activadas, sería distinto.
De lo poco que he visto, no me parece la más genial de las ideas, sino como bien dices, una afirmación algo exagerada para vender un libro… me parece bien que queramos avanzar en las posibilidades de presentación, pero quizás habría que pensar si eso vendrá de la mano de CSS o más bien de las nuevas posibilidades que vemos cada día con javascript.
De todos modos, la propuesta para olvidar todo lo que sabemos sobre CSS en un contexto en el que deberíamos esperar por lo menos un par de año para contar con soporte para la técnica que presentan es a lo menos absurdo, sobre todo si para ese entonces el navegador mayoritario fuera MSIE 8, que tendría un soporte mucho mejor para los estándares que ya utilizamos ahora.
Alma, he podido apreciar lo del centrado vertical de los divs en tu comentario. Déjame decirte que si tocas la propiedad CSS line-height, la pones con el mismo height que el div y luego pones vertical-align: middle funciona
Creo que lo sabrás pero por si acaso.
PAZ!
Lo que es un error es pensar que con esas propiedades van a tener la posibilidad de maquetar con tablas para los antiguos. Yo personalmente tardaría 100 veces más si intento marcar un html con todo tablas, me moriría.
Estas nuevas propiedades, yo la veo muy bien, para cuando listamos una serie de productos, con una foto y un texto justo debajo de esa foto, y se van flotando a la izq, si usamos estas propiedades, no nos importará que unos tengan más textos que otros.
Vamos otra posibilidad más para jugar, como hacemos al poner a como display:block, lo que es un error es basarse en eso para dar la estructura de toda la web.
Un saludo
Hola les quiero preguntar ¿Cual sería la manera correcta de maquetar formularios?
o aplicaciones web ¿Con tablas de html?, Al integrar código funcional con diseños web, muchas veces el manejo de divs se vuelve muy difícil sobretodo tomando en cuenta que se debe desplegar información variable.
Despues si se agregan efectos de javascript raros resulta más dificil darle mantenimiento a un sistema. Tomando en cuenta que tanto los formularios como el contenido que se despliega pudiera ser dinámico ¿Que considerarían la mejor opción para maquetar? “sacrificar” esfuerzo en diseño web, o sacrificar esfuerzo de mantenimiento.
Tengo malas experiencias usando las divs por ejemplo si incrusto un formulario no se despliega todo en diferentes navegadores, si ese formulario es dinámico no tengo otra opción que usar una tabla que se expande lo que un formulario gordo necesita.
Dr Extraño, habría que ver caso por caso pero en mi experiencia, si algo se complica demasiado es que podría hacerse mejor. Por ejemplo, en el caso de los formularios – dinámicos o no – lo mejor es utilizar los elementos propios de un formulario (fieldsets, labels etc.) y revisar bien la maquetación para quitarte todo lo que no sea estrictamente necesario.
El problema de llenar el código de divs innecesarios es casi tan grave como el de recurrir a tablas para maquetar, la única diferencia es que las tablas HTML también tendrán un impacto en la accesibilidad de tus sitios y aplicaciones web.
Para algunos casos seguramente si será práctico trabajar con propiedades de tabla en divs desde CSS pero, como te digo, hay que ir viendo caso por caso y no generalizar.
Buenas … yo es que no tengo mucha experiencia a la hora de maquetar una pagina web … pero vario de uno a otro segun la comodidad o lo que necesite realizar o hacer…
Pero por regla general prefiero usar css y los float !! para mi es mas comodo.
Podes usar tablas. Podes (y es lo que mas usamos) CSS.
Hay un elemento en el que nadie se fija.
Cantidad de codigo.
Supuestamente al dejar de utilizar el recurso tabulador de las tablas y pasar al recurso DIVISORIO (divs) no son un “elemento de significacion” sino de division de contenidos y ya, DIVS.
El uso de DIVS y CSS + jquerry lo que termino generando, a esta altura de la evolucion en maquetacion web, es toneladas de codigo.
Ya no importa si hay un “tr” o un “table” de mas o de menos, ese argumento no va mas.
Para poner poner un texto en bold usabamos <b> ahora <span style=”font-weight=bold”>TEXTO<span>.
Se ahorro codigo?.
Multiplica este tipo de informacion por mil.
Lo que esta nueva tecnologia afecta en realidad es al Microprocesador del Servidor y a su Memoria ram.
Es en el HARDWARE donde mas influye CSS.
El uso de CUALQUIER RECURSO que AHORRE RECURSOS valga la redundancia, es valido.
sea table o div o lo que quieras.
No es invalido utilizar tablas no es tan practico usar divs.
No era el problema la CANTIDAD DE CODIGO sino encontrar una estructura de Maquetacion comun.
Cosa que no la hay.
Hasta que salga el famoso “CSS4.20 BETA” y sea 100% bien renderizado por los navegadores y venga incluido el sistema “DIVS COMO TABLAS” por default y los navegadores se pongan de acuerdo en que entienden cuando ven un DIV…
hasta ese momento, CUALQUIER RECURSO que AHORRE RECURSOS es valido.
No hay un standard aun.
Hola Javier, no se qué tenga que ver jquery en el asunto, pero dices “…<span style=”font-weight=bold”>”, solo me queda decir, alguna vez has maquetado con CSS correctamente??
jquery tiene que ver tanto como lo que dice en el texto que tiene que ver, releer.
por lo demas, <i>chicanas</i> <b>no</b> acepto asi que saludos.