Maquetando sin tablas, pero como con tablas: display inline block

Aviso: lo que se explica en el siguiente artículo forma parte de lo que denomino “la maquetación web del futuro“, es decir, cosas que podremos hacer dentro de un tiempo pero que, dado el uso que aún tienen algunos navegadores antigüos, hoy por hoy no es recomedandable utilizar

Actualización!: Anieto2k publica un hack que permitiría utilizar esta técnica en todos los navegadores. 

Esta semana he leído dos artículos (artículo 1, artículo 2) donde unidos a la palabra maquetación se usan términos como “Table”, “Cell” o “Row”. ¿Qué pasa? ¿Se ha vuelto a poner de moda la maquetación basada en tablas? Evidentemente no, esto no tiene vuelta atrás aunque todavía haya demasiados sitios webs table based.

La idea central de estos artículos es la posibilidad de poder aplicar a elementos que no son tablas propiedades de éstas. Esto se hace mediante los valores “table”, “table-cell” y “table-row” de la propiedad display. Se vuelve a hablar de esto ahora que Internet Explorer 8 admite y funciona con estos valores, aunque no lo hace de forma totalmente correcta (hablamos de la beta 2).

En la práctica lo que esto supone es que podemos hacer un elemento HMTL como, por ejemplo, un DIV, tenga el comportamiento de una tabla. Es decir, sin hacer atentados semánticos podemos aprovechar las propiedades de la maquetación con tablas. Un claro caso de uso es poder hacer algo que trae de cabeza a cualquier maquetador CSS: que un conjunto de elementos flotantes tengan una altura común. Dos imágenes valen más que 2.000 palabras

Caso 1: (ver html)

Caso 2: (ver html no en Internet Explorer < 8)

Para el segundo caso lo que hemos hecho es usar en los siguientes valores de la propiedad display:

  • display: table->le dice al elemento que se comporte como una tabla.
  • display: table-row-> le dice al elemento que se comporte como una fila de una tabla
  • display: table-cell->  le dice al elemento que se comporte como una celda de una tabla

Ojo, por si no has leido atentamente: esta técnica se podrá usar cuando la gente

Más sobre este tema:


7 comentarios a esta entrada

Me imagino una vez ie8 en el mercado buscando fix para los ie6, que locura!!! A largo plazo si que lo veo super interesante, que todo se vaya acomodando en su sitio, porque ahora muchas veces maquetar bien una web es trabajo similar al del impresor.

Por cierto Jose, no crees que en los ejemplos deberías haber nombrado a los estilos de otra manera sin el table, row o cell, tal vez hubiese quedado más bonito :P

Que delicadito el niño… :) así nos enteramos mejor.

creo que esto es complicarse la vida. Hay cosas muy interesantes en CSS (tanto en el motor de Explorer como el de Gecko) pero siempre tenemos la atadura de compatibilidades.
E8 va a traer unos cuantos dolores de cabeza y esto no creo que ayude mucho.
En su momento la W3C ya dijo que las cosas de diseño fueran de la mano de CSS y Javascript. Así que haciendo uso de Javascript podemos solventar esto:

(mootools)
var alt = 0;
$$(’.table .celda’).each(function(el){alt= el.size.height}.blind(alt));
$$(’.table .celda’).each(function(el){el.setStyle(’height’, alt)}.blind(alt));

mmm si, se puede, pero normalmente eso se hace en el onLoad y y en el ejemplo que he puesto se produciría un efecto de salto extraño.

Por otro lado, no estoy de acuerdo con que el IE8 vaya a traer muchos dolores de cabeza. No soy adivino, pero el trabajo que empezó con IE7 lo puso a la altura del resto y no creo que haya un paso atrás en ese sentido.

Sabeis de los importat?? son un gran invento!!

width:522px !important; –> Sólo ajusta firefox
*width:522px !important; –> sólo ajusta ie7
*width:525px;–> Sólo ajusta ie6

Probadlo y me comentais!!

@Antonio

Los importants son para hacer que una determinada regla CSS supere a otra aunque según la cascada una de ellas debiese tener más importancia que la otra.

En tu caso la usas como Hack de CSS pero el zen del maquetador es no tener que usar ni un hack.

@Antonio: y además una de las reglas de oro del maquetador es no usar importants (a no ser que sea estrictamente necesario).
La otra es saber usar hacks en condiciones, o sea mediante condicionales en hojas de estilo separadass.
Y eso de qe sólo ajusta a…
No sé, deberías informarte un poco más antes de criticar a tu “montador” y hacer el ridiculo (no en todo, que algo de rezón si que llevas, pero poca)

Leave a Reply