Cómo maquetar una tabla de productos con Bootstrap

Damián De Luca

4 meses ago

En el diseño web moderno, las tablas juegan un rol crucial para presentar datos de manera clara y organizada. Si bien el HTML básico proporciona una estructura funcional para las tablas, Bootstrap ofrece una manera elegante de estilizar y mejorar su presentación sin tener que escribir mucho CSS desde cero.

En este artículo, vamos a ver cómo maquetar una tabla de productos con Bootstrap paso a paso. Usaremos ejemplos con código y analizaremos cómo personalizar las tablas para satisfacer las necesidades específicas de tu proyecto. Además, veremos las limitaciones de este enfoque y las mejores prácticas para gestionar grandes volúmenes de datos.

Estructura básica de una tabla en HTML

Antes de pasar a Bootstrap, es importante entender la estructura básica de una tabla en HTML. Una tabla HTML típica se compone de las siguientes etiquetas:

<table>
  <thead>
    <tr>
      <th>Producto</th>
      <th>Precio</th>
      <th>Categoría</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Producto A</td>
      <td>$10</td>
      <td>Electrónica</td>
    </tr>
    <tr>
      <td>Producto B</td>
      <td>$15</td>
      <td>Ropa</td>
    </tr>
  </tbody>
</table>

Aquí tenemos la estructura básica:

<table>: define el contenedor de la tabla.
<thead>: contiene la fila del encabezado.
<tr>: define una fila.
<th>: representa una celda de encabezado, normalmente en negrita.
<tbody>: agrupa las filas de datos en el cuerpo de la tabla.
<td>: representa una celda de datos.

Aunque esta tabla es funcional, su diseño es bastante básico. Aquí es donde entra Bootstrap.

Agregar Bootstrap para mejorar el diseño

Para usar Bootstrap, primero necesitamos incluir sus archivos CSS y JavaScript. Podemos hacerlo a través de un CDN o descargarlo e incorporarlo en nuestro proyecto. En ese caso se recomienda ubicarlo en el carpeta css. Para vincularlo usamos la etiqueta <link> como vemos a continuación:

<head>
  <link href="css/bootstrap.min.css" rel="stylesheet" />
</head>

Tabla con clases de Bootstrap

Bootstrap proporciona una clase llamada table que se aplica directamente a la tabla HTML para darle estilo automáticamente. Aquí un ejemplo:

<table class="table">
  <thead class="thead-dark">
    <tr>
      <th scope="col">Producto</th>
      <th scope="col">Precio</th>
      <th scope="col">Categoría</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Producto A</td>
      <td>$10</td>
      <td>Electrónica</td>
    </tr>
    <tr>
      <td>Producto B</td>
      <td>$15</td>
      <td>Ropa</td>
    </tr>
  </tbody>
</table>

En el ejemplo anterior recurrimos a la clase thead-dark para darle un fondo oscuro a la cabecera de la tabla y empleamos el color blanco para las letras de dicho encabezado.

Variantes de tablas en Bootstrap

Bootstrap ofrece diferentes variantes y estilos para las tablas. A continuación te muestro algunas de las más útiles:

table-striped: alterna el color de fondo de las filas.
table-bordered: agrega bordes a todas las celdas.
table-hover: resalta una fila cuando se pasa el cursor por encima.
table-sm: crea una tabla más compacta.

<table class="table table-striped table-bordered table-hover table-sm">
  <thead class="thead-dark">
    <tr>
      <th scope="col">Producto</th>
      <th scope="col">Precio</th>
      <th scope="col">Categoría</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Producto A</td>
      <td>$10</td>
      <td>Electrónica</td>
    </tr>
    <tr>
      <td>Producto B</td>
      <td>$15</td>
      <td>Ropa</td>
    </tr>
  </tbody>
</table>

Personalización de las tablas con Bootstrap

Si bien Bootstrap facilita la creación de tablas estilizadas, podemos personalizarlas aún más con CSS propio o con las utilidades de Bootstrap. Por ejemplo, podríamos querer cambiar el color de fondo o ajustar el ancho de las celdas.

Ejemplo de código HTML con personalización de estilos:

<style>
  .table-custom thead {
    background-color: #343a40;
    color: white;
  }
  .table-custom td {
    text-align: center;
  }
</style>

<table class="table table-custom">
  <thead>
    <tr>
      <th scope="col">Producto</th>
      <th scope="col">Precio</th>
      <th scope="col">Categoría</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Producto A</td>
      <td>$10</td>
      <td>Electrónica</td>
    </tr>
    <tr>
      <td>Producto B</td>
      <td>$15</td>
      <td>Ropa</td>
    </tr>
  </tbody>
</table>

Aquí hemos cambiado el color de fondo del encabezado de la tabla y alineado el texto en el centro de las celdas.

¿Cuándo usar tablas y cuándo no?

Las tablas son ideales para mostrar datos estructurados, como productos, inventarios, o cualquier tipo de información tabular. Sin embargo, hay algunas recomendaciones que debemos tener en cuenta:

Problemas de rendimiento. Si se requiere representar una gran cantidad de datos, cargar todo en una sola tabla puede afectar el rendimiento de la página. En estos casos, es mejor paginar los resultados o usar técnicas, como por ejemplo lazy loading.
Experiencia de usuario. Es fundamental verificar como queda representada la tabla en diversos dispositivos. Tablas con muchas columnas pueden no ser cómodas en dispositivos móviles. Siempre explico en mis clases que a la hora de elegir una tabla como elemento para mostrar datos debemos tener especial cuidado en la experiencia que tendrá el usuario en cada dispositivo.
Accesibilidad. Aunque Bootstrap mejora el aspecto de las tablas, es importante seguir buenas prácticas de accesibilidad. Usar etiquetas como scope y aria-label puede hacer que la tabla sea más comprensible para lectores de pantalla.

Datos dinámicos e integración con JavaScript

Cuando trabajamos con grandes cantidades de datos, es mejor traerlos de manera dinámica desde una API o base de datos. A continuación te muestro cómo hacerlo de forma sencilla con JavaScript:

<script>
  // Datos ficticios
  const productos = [
    { nombre: "Producto A", precio: "$10", categoria: "Electrónica" },
    { nombre: "Producto B", precio: "$15", categoria: "Ropa" },
    { nombre: "Producto C", precio: "$20", categoria: "Hogar" }
  ];

  // Referencia a la tabla. En proyectos reales es recomendable usar Id como rerencia.
  const tableBody = document.querySelector("tbody");

  // Insertar filas dinámicamente
  productos.forEach(producto => {
    const row = `
      <tr>
        <td>${producto.nombre}</td>
        <td>${producto.precio}</td>
        <td>${producto.categoria}</td>
      </tr>
    `;
    tableBody.innerHTML += row;
  });
</script>

En el ejemplo anterior, para simular los datos, en lugar de traer la información de una base de datos o Rest API, los creamos un array de productos. Luego usamos JavaScript para recorrer ese array y generar dinámicamente las filas de la tabla. Insertamos las filas en el cuerpo de la tabla (<tbody>). La referencia fue con querySelector(), pero también se puede usar getElementById(). Cabe destacar que referenciar a la id de un elemento es ideal en proyectos donde podemos tener más de una tabla.

El forEach nos permite recorrer los productos y con innerHTML lo escribimos dentro del elemento seleccionado en la constante tableBody.

Si deseamos obtener datos de una Rest API se pueden usar las características de Fetch y Async y Await en JavaScript.

Maquetar tablas con Bootstrap: conclusión

El uso de Bootstrap para maquetar tablas es una excelente opción para ahorrar tiempo y lograr un diseño moderno sin mucho esfuerzo. Hemos visto cómo estructurar una tabla en HTML, aplicar diferentes clases de Bootstrap para mejorar su apariencia, y cómo personalizarla según tus necesidades.

Además, hemos revisado las limitaciones que pueden surgir al mostrar grandes cantidades de datos y cómo superarlas con la carga dinámica de datos con JavaScript.

Para obtener la versión más reciente de Bootstrap y acceder a la documentación oficial podemos ingresar en el sitio web https://getbootstrap.com/.

Si te interesa conocer más sobre las características de Bootstrap o como maquetar con HTML y CSS dejame un comentario o escribeme un mensaje.