Cómo crear una tabla responsive con imágenes en HTML (para principiantes)

Aprende paso a paso cómo crear una tabla con imágenes que se adapte a cualquier dispositivo. Ideal para sitios web, blogs o Joomla. ¡Sin conocimientos avanzados de programación!

📌 ¿Qué es una tabla responsive?

Una tabla responsive es aquella que se adapta al ancho de la pantalla, mostrando su contenido correctamente tanto en computadoras como en móviles o tablets. En este caso, usaremos imágenes dentro de celdas para crear una presentación visual y funcional.

🔧 ¿Qué necesitas?

• Un editor de texto (como Notepad++, Sublime Text o el editor de tu CMS).
• Imágenes optimizadas (JPG o PNG, idealmente pequeñas).
• Acceso a tu sitio web o CMS (como Joomla).

🛠 Paso 1: Estructura básica en HTML

Creamos una tabla simple con 4 columnas. Cada celda contiene un enlace con una imagen.

<table style="width: 100%; text-align: center;">
  <tbody>
    <tr>
      <td><a href="#"><img src="/images/imagen1.jpg" alt="Imagen 1" style="width: 100%; max-width: 60px; height: auto;"></a></td>
      <td><a href="#"><img src="/images/imagen2.jpg" alt="Imagen 2" style="width: 100%; max-width: 60px; height: auto;"></a></td>
      <td><a href="#"><img src="/images/imagen3.jpg" alt="Imagen 3" style="width: 100%; max-width: 60px; height: auto;"></a></td>
      <td><a href="#"><img src="/images/imagen4.jpg" alt="Imagen 4" style="width: 100%; max-width: 60px; height: auto;"></a></td>
    </tr>
  </tbody>
</table>

🖥️ ¿Por qué este código es responsive?

• La tabla usa width: 100% para ocupar todo el ancho disponible.
• Las imágenes se escalan automáticamente gracias a max-width: 60px y height: auto.
• Esto permite que se adapten sin deformarse en distintos dispositivos.

✅ Recomendaciones finales

• Utiliza imágenes ligeras para mejorar la velocidad de carga.
• Revisa el resultado en dispositivos móviles para confirmar que todo se ve bien.
• Si estás en Joomla, coloca el código en un artículo o módulo de tipo “HTML personalizado”.

¿Listo para probarlo? Solo copia y pega el código, ajusta las imágenes y enlaces, ¡y tendrás una tabla responsive funcional en minutos!