martes, 7 de mayo de 2013

Formateando información en tablas usando DIV's de forma sencilla

Es muy común tener que formatear información en formato de tablas en una web, pero todos sabemos que utilizar la etiqueta TABLE no está recomendado por cuestiones de accesibilidad y diseño responsive o adaptable.

Una forma sencilla y que siempre funciona bien es formatear la información con este código:

<div style="float: left; padding: 1em;">
<h3>CELDA 1</h3>
</div>

<div style="float: left; padding: 1em;">
<h3>CELDA 2</h3>
</div>


Con esas propiedades CSS en el DIV conseguiremos que las celdas se vayan apilando una tras otra de izquierda a derecha. Cuando el tamaño de pantalla cambie la pila de celdas se autoreconfigurará para mostrarse de la mejor manera en dispositivos de pantallas pequeñas.
Publicar un comentario