Cómo crear tablas usando sólo CSS

El uso de tablas como etiquetas HTML no ha desaparecido, se ha insistido mucho en dejar de usar la etiqueta para la maquetación, es decir, para diseñar el sitio web completo, ya que en parte ese es el trabajo de las capas. La etiqueta <table> siempre fue pensada para crear tablas de datos, como cualquier tabla que llenamos con datos y quizá una imagen, pero ha sido tanto el odio a la etiqueta que las tablas ahora se crean con capas también.

En este tutorial vamos a ver cómo crear una sencilla tabla usando capas y CSS, de tal forma que después del tutorial no les volverán a quedar ganas de usar tablas normales, ya que estas tablas con capas nos proporcionan una mayor flexibilidad para controlar.

Ejemplo del tutorial

Antes de empezar

Necesitamos entender cómo está compuesta nuestra tabla. Tenemos como siempre un contenedor principal, y después una cabecera que sirve de título para la tabla. Cada tabla puede o no tener una fila que sirve de nombre de la columna, que al final es la misma fila que se usa para todos los demás campos.

Cada fila tiene columnas, en nuestro ejemplo 3, así que con esa combinación logramos tener nuestra tabla completa con los elementos básicos para una buena presentación.

HTML

Basta definir las capas como lo explicamos, recordemos que las filas contienen a las columnas, por lo que dentro de ellas se especifican las mismas.

CSS

Para darle estilo lo más importante es saber que cada columna debe tener un ancho específico y que la suma de los anchos de las tres columnas no se pase, sino se desborda la tabla. Cada columna tiene un display de inline-block, para que puedan estar en línea.

Acerca de los colores intercalados usamos el selector :nth.child() para decirle que las filas impares van a tener un color de fondo gris.

Conclusiones

Realmente considero que hacer tablas con capas puede llegar a ser un poco más laborioso que sólo usar la etiqueta <table>, pero a largo plazo vamos a ver que modificar la misma tabla será mucho más fácil porque sólo se modifica el CSS. Se pueden hacer tablas mucho más complejas y llamativas, pero para fines de ver la facilidad para realizar una sencilla nos es de utilidad este ejemplo. Espero les haya gustado y se dediquen a hacer sus propias tablas de ahora en adelante.