lunes, 5 de marzo de 2012

Crear y simular una tabla con CSS

Llega un momento que estilamos todo a su máxima expresión, por puristas, por comodidad, por fanatismo o
por lo que sea,

Si bien, no hay una norma que diga que crear una tabla con CSS sea semánticamente incorrecta, para datos tabulares se recomienda utilizar los tags HTML correspondientes, pero si por algún capricho o necesidad necesitaramos simular una tabla, lo podemos hacer sin demasiado código y a puro CSS

Para conseguir un resultado como se muestra en esta imágen
 
veamos:

Antes que nada explico un poco el código a vuelo de ave
Vamos a crear una tabla de 3 columnas por 4 filas, en la primer fila van a ir los encabezados o titulos y en las siguientes la información que sea,

vamos:

El truco consiste en aplicar sabiamente las propiedades CSS float y clear; float para tabular los div uno atras de otro y "romper" esa sucesión con clear para  forzar un salto de linea, más adelante podemos ver el código fuente de lo que estoy hablando asi queda mucho más claro.

nuestra tabla se va a llamar en un esfuerzo de originalidad "tabla" y va a ser la clase de nuestro primer <DIV>
con el tag <P> vamos a hacer un salto forzado para crear la fila  y con los class titulo y columna vamos a formatear el diseño de nuestra tabla

<html>
<head>
<style type="text/css">
<!--
.tabla {
 width: 333px;
 border-top:1px solid #ccc;
 border-left:1px solid #ccc;
 background-color:#eee;
 color: gray;
 text-align:center;
 font-family:arial,verdana,times;
 font-size:12px;
 }
.tabla p {
 clear:both;
 width: 100%;
 margin: 0;
}

.tabla .titulo {
 padding: 5px;
 background-color: #ddd;
 font-family:arial,verdana,times;
 float:left;width:100px;
 border-right: 1px solid #ccc;
 font-weight:bold;
 }

.tabla .columna {
 padding: 5px;
 float:left;width:100px;
 border-right: 1px solid #ccc;
 border-bottom: 1px solid #ccc;
 }

-->
</style>
</head>
<body>

<div class="tabla">
<p><div class="titulo">COLUMNA #1</div><div class="titulo">COLUMNA #2</div><div class="titulo">COLUMNA #3</div></p>
<p><div class="columna">datos1  </div><div class="columna">datos2</div><div class="columna">datos3</div></p>
<p><div class="columna">datos1  </div><div class="columna">datos2</div><div class="columna">datos3</div></p>
<p><div class="columna">datos1  </div><div class="columna">datos2</div><div class="columna">datos3</div></p>
</div>
</body>
</html>
Reacciones:

2 comentarios:

Anónimo dijo...

capo, me salvaste
gracias

Johann dijo...

gracias men, me ahorraste ene tiempo, muchisimas gracias