Tabla de contenido
Una vez más aquí. Hoy vengo a dejar un pequeño artículo para un usuario que me ha proporcionado un código de una tabla HTML, y que no conseguía que se mostrarse de bien en todas los tamaños de pantalla. Vamos, que lo que este usuario quería utilizar era una tabla responsive en su proyecto web. Para ello, este usuario utilizaba HTML y CSS, lo cual está bien, pero no lo utilizaba de forma correcta para que se mostrase la información de manera legible cuando la tabla se cargaba en una pantalla más pequeña. Por eso me pidió que le indicara cómo lo haría yo, y por eso me puse a escribir el código que vamos a ver en las siguientes líneas.
Por si alguien no lo sabía aún, una tabla responsive es una tabla que se adapta automáticamente al tamaño de pantalla del dispositivo en el que se esté visualizando. Esto significa que se reajusta de manera automática para que los datos sean legibles y fácilmente accesibles desde cualquier dispositivo. Ya sea un ordenador de escritorio, una tableta o un teléfono móvil.
Para lograr esto, se utilizan técnicas de diseño web responsive, como son las media queries de CSS. Estas consultas permiten aplicar estilos específicos para pantallas de diferentes tamaños y orientaciones. Por ejemplo, en una pantalla pequeña, las columnas pueden ocultarse y los encabezados de tabla pueden mostrarse en lugar de la fila como un encabezado de celda, o cosas parecidas.
En resumen, una tabla responsive es una tabla que se adapta al tamaño de la pantalla para mejorar la experiencia del usuario en dispositivos móviles.
Crea una tabla responsive
Como decía, para este ejemplo, necesitaremos un archivo index.html, en el que montar la tabla que queremos que se visualice. En la tabla cargaremos los datos (o directamente los pondremos a mano, como ocurre en este ejemplo). Después en el archivo style.css, será donde vamos a cargar las reglas css para que esta tabla se pueda ver de forma correcta en pantallas más pequeñas.
A continuación vamos a ver el código con el que hacer responsive esta tabla para que se vea de la siguiente forma:
Archivo index.html
En este archivo vamos a crear la estructura de la tabla. Aquí hay que destacar que en las etiquetas «TD» vamos a añadir data-colum, seguido del valor de la cabecera a la que corresponde esa celda. Por lo demás, el código es el típico de una tabla html.
Dentro de este archivo index.html, solo tendremos que pegar el siguiente código:
<!DOCTYPE html>
<html lang="es" >
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tabla Responsive</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="titulo">Tabla Responsive</div>
<table>
<thead>
<tr>
<th>Nombre</th>
<th>Apellido</th>
<th>Trabajo</th>
<th>Twitter</th>
</tr>
</thead>
<tbody>
<tr>
<td data-column="Nombre">Perico</td>
<td data-column="Apellido">Palotes</td>
<td data-column="Trabajo">Cosedor de anchoas</td>
<td data-column="Twitter">@pericoP</td>
</tr>
<tr>
<td data-column="Nombre">Paco</td>
<td data-column="Apellido">Jones</td>
<td data-column="Trabajo">Sorbedor de chicles</td>
<td data-column="Twitter">@pj</td>
</tr>
<tr>
<td data-column="Nombre">Tomás</td>
<td data-column="Apellido">Vinocaliente</td>
<td data-column="Trabajo">Medidor de Curics</td>
<td data-column="Twitter">@tvinocaliente</td>
</tr>
<tr>
<td data-column="Nombre">Remigia</td>
<td data-column="Apellido">Confuerza</td>
<td data-column="Trabajo">Olfateadora de anos</td>
<td data-column="Twitter">@remic</td>
</tr>
<tr>
<td data-column="Nombre">Ike</td>
<td data-column="Apellido">Andromenawer</td>
<td data-column="Trabajo">Comedor de bolas olorosas de WC</td>
<td data-column="Twitter">@ikdromenawer</td>
</tr>
</tbody>
</table>
</body>
</html>Archivo style.css
Ahora, en el archivo style.css solo nos queda colocar las reglas css con las que modificaremos el comportamiento de la tabla cuando se visualice en pantallas de menor tamaño.
table {
width: 750px;
border-collapse: collapse;
margin:50px auto;
}
/* linea superior de cabeceras */
tr:nth-of-type(odd) {
background: #eee;
}
th {
background: #ff4d4d;
color: white;
font-weight: bold;
}
td, th {
padding: 10px;
border: 1px solid #ccc;
text-align: left;
font-size: 18px;
}
/* Título */
.titulo {
display: inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 10px;
border: none;
font: normal 38px / normal "Warnes", Helvetica, sans-serif;
color: rgba(255, 255, 255, 1);
text-decoration: normal;
text-align: center;
-o-text-overflow: clip;
text-overflow: clip;
white-space: pre;
text-shadow: 0 0 10px rgb(255, 0, 0), 0 0 20px rgba(255, 0, 0),
0 0 30px rgba(255, 0, 0), 0 0 40px #727272, 0 0 70px #727272,
0 0 80px #4e4e4e, 0 0 100px #2b2b2b;
-webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
-moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
-o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
width: 100%;
margin-top: 10px;
}
.titulo:hover {
text-shadow: 0 0 10px rgb(27, 27, 27), 0 0 20px rgba(27, 27, 27),
0 0 30px rgba(27, 27, 27), 0 0 40px #000000, 0 0 70px #000000,
0 0 80px #000000, 0 0 100px #000000;
}
/*
Ancho máximo de esta tabla EN PARTICULAR.
Esta consulta surtirá efecto para cualquier pantalla de menos de 760px.
*/
@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
table {
width: 100%;
}
/* Forzar la tabla para que ya no sea como en pantalla completa */
table, thead, tbody, th, td, tr {
display: block;
}
/* Ocultar encabezados de tabla (no se usa display: none; por lo de la accesibilidad) */
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr { border: 1px solid #000000; }
td {
/* Comportarse como una "fila" */
border: none;
border-bottom: 1px solid #c6c6c6;
position: relative;
padding-left: 50%;
}
td:before {
/* Ahora como un encabezado de tabla */
position: absolute;
left: 10px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
/* Etiquetar los datos con el valor de data-column*/
content: attr(data-column)": ";
color: #000;
font-weight: bold;
}
}Aquí vamos a incluir las media queries para que en pantallas menor a 760px desaparezca la cabecera y se coloque como columna en el lado izquierdo.
Y con esto cualquiera podrá crear sus propias tablas responsive de forma bastante sencilla. Si quieres ver la tabla de este ejemplo funcionando, solo tienes que dirigirte a la sección de ejemplos de esta web.
