iMeil NewsLetter - Marketing global

Cómo crear tablas con CSS

GregPor: Greg Alvarez
iMeil.com.mx
Octubre 11, 2010

Compártelo:   Comparte en Facebook Comparte en Twitter Comparte en LinkedIn

Cómo crear tablas con CSS La forma de estructurar los sitios, en la actualidad, se basa en una codificación que ha dejado de lado el uso de tablas para este fin. Las tablas, por tal motivo, han pasado a ser utilizadas exclusivamente para la presentación de datos tabulados.

Los buenos diseñadores y desarrolladores web, no obstante, están migrando la tabulación de datos para que éstos sean presentados por CSS... y la tarea no es dificil, como estás por conocer a continuación.

Código HTML

Primero implementamos el código HTML que servirá como base para la elaboración de la tabla.

Para ello, vamos a emplear dos listas desordenadas, con lo que nuestro código será el siguiente:

<div class="tabulacion">
  <ul class="columnas">
      <li class="celda">Marca:</li>
      <li class="celda">Modelo:</li>
      <li class="celda">Precio:</li>
  </ul>
  <ul class="columnas">
      <li class="celda2">Intel</li>
      <li class="celda2">i7 950 Bloomfield</li>
      <li class="celda2">$ 295 USc</li>
  </ul>
</div>
Se ha establecido un DIV, que funcionará como contenedor, al cual se asignó la clase tabulacion. Se crearon dos listas desordenadas que llevan como clase columnas. Finalmente, como ejemplo, se establecen tres renglones con datos que llevan como clase celda, para la columna de la izquierda, y celda2, para la columna de la derecha.

Codificación CSS

Definimos, en primera instancia, el código para el contenedor. Creamos la clase tabulacion, la posicionamos en forma relativa, le asignamos fuente arial a 12 pixeles en color gris semejante al negro, la hacemos flotar a la izquierda y se le asigna un margen de 20 pixeles en la parte superior.

.tabulacion {
position:relative;
font:normal 12px arial,verdana;
color:#333;
float:left;
margin:20px 0 0 0;
}
Generamos la clase columnas, la posicionamos en forma relativa, la hacemos flotar a la izquierda y removemos cualquier estilo para la lista desordenada.

.columnas {
position:relative;
float:left;
list-style: none;
}
Finalmente, generamos las clases celda y celda2 que se encargarán de aplicar el estilo a los datos presentados. Les asignamos una altura de 15 pixeles, una altura de línea de 20 pixeles, removemos cualquier espacio interno (padding), asignamos margen y anchura.

.celda, .celda2 {
height:15px;
padding:0;
line-height:20px;
}

.celda {
width:75px;
margin:0 0 5px 10px;
}

.celda2 {
width:150px;
margin:0 0 5px 0;
}
La primera línea, con los selectores .celda, .celda2, es lo que se conoce como "combinación", y se crea para agrupar la misma declaración que se aplica a ambas, con lo cual reducimos el tamaño de nuestro archivo CSS externo y facilitamos la implementación de cambios, de requerirse alguno, a futuro.

Lee lo que se opina sobre el tema

Comentario:
Nombre*:
E-mail*: