Cómo hacer una tabla responsive en HTML o Wordpress

Si necesitas crear una tabla responsive que se adapte a todo tipo de pantallas, aquí te explico como hacer una en HTML con CSS, además de Wordpress, ya sea manualmente o con plugin. Yo te ofrezco 3 opciones y tu elige la que prefieras.

Qué es una tabla responsive

Una tabla responsive es una tabla HTML diseñada para adaptarse automáticamente a diferentes tamaños de pantalla y dispositivos. Esto significa que, ya sea que un usuario acceda a tu sitio desde un ordenador de escritorio, una tableta o un smartphone, la tabla será fácil de leer y navegar.

Así pues, en lugar de mantener un formato rígido, la tabla utiliza estilos CSS, diseño flexible o incluso interacciones dinámicas como scroll horizontal o alternancia de datos para ajustarse al espacio disponible. Lo cual tiene bastante ventajas:

1. Mejor experiencia del usuario: los usuarios pueden leer los datos fácilmente en cualquier dispositivo sin hacer zoom o desplazarse de forma incómoda.
2. Optimización para dispositivos móviles: las tablas se ven ordenadas y legibles en pantallas pequeñas, mejorando la usabilidad y evitando problemas en móviles.
3. Mejora en el SEO: Google valora las tablas legibles en móviles, ya que prioriza la experiencia móvil con su Mobile-First Indexing.
4. Presentación de datos más clara: incluso con muchas columnas o filas, las tablas responsive organizan y presentan la información de forma accesible.
5. Mayor accesibilidad: son inclusivas para todos los usuarios, incluidos quienes utilizan lectores de pantalla o herramientas de asistencia.

No obstante, antes de nada, vamos a comprender bien que es una tabla HTML.

Como hacer una tabla en HTML

Crear una tabla en HTML es sencillo. Utilizas la etiqueta <table> para definirla, y dentro incluyes filas (<tr>) y celdas (<td> para datos o <th> para encabezados). Te lo explico con una tabla (para rizar el rizo):

Elemento	Descripción
<table>	Etiqueta principal que define la tabla.
<thead>	Define la cabecera de la tabla.
<tr>	Define una fila en la tabla.
<th>	Crea una celda de encabezado (se ve en negrita).
<td>	Define una celda normal en la tabla.
<tbody>	Contiene el cuerpo principal de la tabla.

Y para que lo comprendas mejor te muestro el código con el que se ha creado dicha tabla:

<table>
  <thead>
    <tr>
      <th>Elemento</th>
      <th>Descripción</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>table</td>
      <td>Etiqueta principal que define la tabla.</td>
    </tr>
    <tr>
      <td>thead/td>
      <td>Define la cabecera de la tabla.</td>
    </tr>
    <tr>
      <td>tr></td>
      <td>Define una fila en la tabla.</td>
    </tr>
    <tr>
      <td>th</td>
      <td>Crea una celda de encabezado (se ve en negrita).</td>
    </tr>
    <tr>
      <td>td</td>
      <td>Define una celda normal en la tabla.</td>
    </tr>
    <tr>
      <td>tbody/td>
      <td>Contiene el cuerpo principal de la tabla.</td>
    </tr>
  </tbody>
</table>

Fíjate que de manera jerárquica partimos de la etiqueta table, seguido de thead para definir la cabecera y tbody para definir el cuerpo. Tras ello, viene la etiqueta tr para definir las filas y td para definir las columnas.

Cómo hacer esta tabla responsive

Para convertir esta tabla en responsive, necesitamos usar CSS para asegurar que la tabla se adapte correctamente a pantallas pequeñas. Y para ello vamos a implementar 2 acciones

• Scroll horizontal: permite que la tabla tenga se pueda desplazar horizontalmente si el ancho de la pantalla es menor al de la tabla.
• Reorganización de columnas: definimos estulos efine para pantallas con un ancho menor a 600px.Cambia la tabla a un diseño de bloques y oculta la cabecera

De hecho, podríamos aplicar simplemente uno de los 2, pero con el objetivo didáctico, vamos con los 2. Y lo que vamos a hacer es ver los 2 métodos por separados y luego los vamos a combinar.

Método 1: Scroll horizontal

El scroll horizontal consiste en envolver la tabla dentro de un contenedor con overflow-x: auto;. Esto permite que los usuarios deslicen la tabla hacia los lados en pantallas pequeñas sin romper el diseño del sitio. Es una solución sencilla y rápida para tablas grandes o con muchas columnas.

Ejemplo básico:

<div style="overflow-x: auto;">
  <table border="1" style="width: 100%; border-collapse: collapse;">
    <thead>
      <tr>
        <th>Nombre</th>
        <th>Edad</th>
        <th>Ciudad</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Juan</td>
        <td>25</td>
        <td>Madrid</td>
      </tr>
      <tr>
        <td>Ana</td>
        <td>30</td>
        <td>Barcelona</td>
      </tr>
    </tbody>
  </table>
</div>

Método 2: Reorganización de columnas

Este método convierte cada fila de la tabla en un bloque de información vertical en pantallas pequeñas. Utiliza @media queries para detectar tamaños de pantalla y aplicar un diseño adaptable, con etiquetas descriptivas (data-label) para cada celda.

Ejemplo básico:

<style>
  @media (max-width: 600px) {
    table, thead, tbody, th, td, tr {
      display: block;
    }
    thead tr {
      display: none; /* Oculta la cabecera */
    }
    tr {
      margin-bottom: 15px;
    }
    td {
      text-align: right;
      padding-left: 50%;
      position: relative;
    }
    td::before {
      content: attr(data-label); /* Añade etiquetas descriptivas */
      position: absolute;
      left: 10px;
      font-weight: bold;
    }
  }
</style>

<table>
  <thead>
    <tr>
      <th>Nombre</th>
      <th>Edad</th>
      <th>Ciudad</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="Nombre">Juan</td>
      <td data-label="Edad">25</td>
      <td data-label="Ciudad">Madrid</td>
    </tr>
    <tr>
      <td data-label="Nombre">Ana</td>
      <td data-label="Edad">30</td>
      <td data-label="Ciudad">Barcelona</td>
    </tr>
  </tbody>
</table>

Combinando ambos métodos

La combinación de ambos métodos permite que la tabla sea flexible y usable en todo tipo de dispositivos. Por un lado, mantiene la posibilidad de hacer scroll horizontal en pantallas medianas y grandes. Por otro, reorganiza la información en un formato más legible para pantallas pequeñas, garantizando una experiencia de usuario óptima.

<style>
  /* Estilo base para la tabla */
  table {
    width: 100%;
    border-collapse: collapse;
  }
  th, td {
    border: 1px solid #ddd;
    padding: 8px;
  }

  /* Contenedor para scroll horizontal */
  .table-container {
    overflow-x: auto;
  }

  /* Responsividad: reorganización de columnas */
  @media (max-width: 600px) {
    table, thead, tbody, th, td, tr {
      display: block;
    }
    thead tr {
      display: none; /* Oculta la cabecera */
    }
    tr {
      margin-bottom: 15px;
    }
    td {
      text-align: right;
      padding-left: 50%;
      position: relative;
    }
    td::before {
      content: attr(data-label); /* Etiquetas descriptivas */
      position: absolute;
      left: 10px;
      font-weight: bold;
    }
  }
</style>

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>Nombre</th>
        <th>Edad</th>
        <th>Ciudad</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td data-label="Nombre">Juan</td>
        <td data-label="Edad">25</td>
        <td data-label="Ciudad">Madrid</td>
      </tr>
      <tr>
        <td data-label="Nombre">Ana</td>
        <td data-label="Edad">30</td>
        <td data-label="Ciudad">Barcelona</td>
      </tr>
    </tbody>
  </table>
</div>

Crear tablas responsive con Gutenberg

Si el tema del código te tira para atrás pero no quieres instalar un plugin, siempre puedes usar Gutenberg, el editor de bloques de WordPress, que incluye un bloque específico para tablas que te permite crearlas sin necesidad de plugins o código adicional.

1. Crear la tabla básica en Gutenberg

1. Entra en el editor de la página o entrada donde quieres insertar la tabla.
2. Haz clic en el botón "Añadir bloque" (+) y selecciona el bloque "Tabla" (o escribe la barra del 7 con la palabra "Tabla").
   
3. Especifica el número de filas y columnas que deseas en la tabla. Puedes agregar o eliminar filas y columnas más tarde.
4. Completa los datos de la tabla. Puedes dar formato al texto (negritas, cursivas, etc.) directamente desde la barra de herramientas de Gutenberg.

Hasta aquí ya tendrías tu tabla ya completa. No obstante, si queires personalizarla y hacerla responsiva, sigue leyendo.

2. Personaliza la tabla (opcional)

3. Hacer la tabla responsive con CSS

Aunque Gutenberg permite crear tablas básicas, no son completamente responsive por defecto. Para mejorar su diseño en dispositivos móviles, puedes añadir este código CSS a tu tema o al Personalizador de WordPress (en "Apariencia > Personalizar > CSS adicional"):

.wp-block-table {
  overflow-x: auto;
  display: block;
  white-space: nowrap;
}

.wp-block-table table {
  width: 100%;
  border-collapse: collapse;
}

.wp-block-table th, .wp-block-table td {
  padding: 8px;
  text-align: left;
  border: 1px solid #ddd;
}

En este sentido y si solo quieres este estilo aplique a la tabla actual te aconsejo crear una clase propia de dicha tabla.

Crear tablas responsive con plugins

Si el método manual no te ha convencido, no te preocupes porque para todo hay solución en la vida y para crear una tabla existen muchos plugins en Wordpress que cumplen a la perfección.

TablePress

Ninja Tables

Ninja Tables funciona con un modelo freemium, es decir, una versión gratuita y una versión de pago más avanzada.