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>
capo, me salvaste
ResponderBorrargracias
gracias men, me ahorraste ene tiempo, muchisimas gracias
ResponderBorrar