Crear tablas adaptables con CSS

Tiempo estimado de lectura: 4 minutos

 

Cómo podemos crear tablas adaptables con CSS

En este artículo vamos a aprender a crear tablas adaptables con CSS. Cuando trabajamos con tablas en WordPress siempre tenemos el problema de que no se adaptan al tamaño de la ventana que está mostrando esa tabla.

Por defecto las tablas no son adaptables, es decir, no se adaptan completamente a la resolución de la ventana que las está visualizando. Entonces, ¿nunca podremos mostrar datos en forma de tabla que vean correctamente en todos los dispositivos?,

En realidad, utilizando la etiqueta <table> no podremos hacerlo, pero sí podremos «engañar» a la ventana que muestra la tabla para poder ver los datos que contiene ordenados de forma tabular.

Entonces, ¿cómo podemos hacer esto?, muy sencillo, utilizando la etiqueta <div> y un poco de CSS.

¡Vamos allá!.

La idea

Lo que vamos a hacer es muy sencillo, vamos a crear una estructura de contenedores o bloques, colocándolos uno al lado del otro (como si fueran las columnas de una tabla), y después una nueva estructura horizontal con el mismo número de bloques que la anterior (como si fueran las filas de una tabla).

La idea es que a medida que el tamaño de la ventana que visualiza esta estructura se haga más pequeño, los bloques (las celdas de la tabla), se hagan más pequeñas horizontalmente (width), con lo que el contenido también se adaptará al tamaño del contenedor. De esta forma, crearemos el efecto adaptable.

Código que vamos a utilizar

Como hemos dicho anteriormente, el código que vamos a utilizar es código CSS, por lo que no será demasiado complicado.

Lo primero que vamos a hacer es crear el contenedor global de la estructura, a continuación crearemos un contenedor para las filas y por último, un contenedor para las columnas.

El código HTML que vamos a utilizar es el siguiente:

<div class="tabla">
<div class="fila">
<div class="columna">Fila 1 Columna 1</div>
<div class="columna">Fila 1 Columna 2</div>
<div class="columna">Fila 1 Columna 3</div>
</div>
<div class="fila">
<div class="columna">Fila 2 Columna 1</div>
<div class="columna">Fila 2 Columna 2</div>
<div class="columna">Fila 2 Columna 3</div>
</div>
<div class="fila">
<div class="columna">Fila 3 Columna 1</div>
<div class="columna">Fila 3 Columna 2</div>
<div class="columna">Fila 3 Columna 3</div>
</div>
</div>

Como ves, este código es muy simple, tan solo hemos creado una estructura de filas y columnas. Ahora vamos a hacer que esta estructura se parezca a una tabla, esto lo conseguiremos con un poco de código CSS.

El código CSS que necesitamos para darle estilos a las «celdas» es el siguiente:

.tabla{
display: table;
}
.fila{
display: table-row;
width: 200px;
}
.columna{
display: table-cell;
width: 200px;
}

Y el resultado es el siguiente:

Crear tablas adaptables con CSS
Crear tablas adaptables con CSS


¿Qué te ha parecido el artículo?. Házmelo saber en los comentarios que tienes más abajo. Estoy deseando leerte.

Por último, si crees que este artículo puede ser interesante para algún amigo tuyo, te agradecería enormemente que lo compartieras con él y con todo el mundo a través de las Redes Sociales.

Puntúa este artículo:
[Total: 0 - Promedio: 0]

Puede que también te interese...

Deja una respuesta

Información básica sobre protección de datos
Responsable: Jose González Bueno.
Finalidad: Moderación y publicación de comentarios.
Destinatarios: No se comunican datos a terceros, salvo por imperativo legal.
Derechos: Tienes derecho a acceder, rectificar, exportar y suprimir tus datos.

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

He leído y acepto la política de privacidad de este sitio. *