Tablas HTML responsive con BootStrap

Antiguamente, las páginas web se diseñaban y maquetaban con tablas <table></table> pero el gran inconveniente de estas era el peso que generaba en la web y la inaccesibilidad para ciertos colectivos de discapacitados. Con el paso de los años, su uso se ha ido reduciendo siendo sustituido completamente por los <div> con sus respectivos estilos (CSS).

Aunque no se aconseja su utilización porque puede ser penalizado por el SEO, en algunas ocasiones son necesarias para mostrar datos concretos y específicos. Por ello, debería de utilizarlas en páginas de tercer orden, lejos de las principales y secundarias páginas posicionadas en los buscadores. Su utilización estaría muy bien, por ejemplo, en fichas técnicas de productos y/o servicios.

Tabla sencilla

<table>
  <tr>
    <th>Art&iacute;culo</th>
    <th>Serie</th>
    <th>Peso</th>
    <th>Almacén</th>
    <th>Stock</th>
    <th>Precio</th>
  </tr>
  <tr>
    <td>Producto 1</td>
    <td>3769797</td>
    <td>36 kg</td>
    <td>Madrid</td>
    <td>350</td>
    <td>8,95 €</td>
  </tr>
  <tr>
    <td>Producto 2</td>
    <td>7432309</td>
    <td>17 kg</td>
    <td>Barcelona</td>
    <td>72</td>
    <td>3,70 €</td>
  </tr>
</table>

Hoy día, los actuales accesos a Internet con dispositivos móviles precisan que las webs sean adaptativas (responsive) a cualquier formato de pantalla y ello es posible gracias a BootStrap entre otros muchos frameworks de CSS diseñados para tal cometido.

Como implementar tablas responsive con BootStrap

Contando que tienes instalado en tu WordPress la plantilla web Athenea o Pharma que ya lleva integrado el framework BootStrap, te vamos a enseñar como proceder para transformar una tabla cualquiera en responsive, además de sus diversos diseños incorporados.

En primer lugar vamos a añadir una clase CSS para dotar a la tabla de los selectores de diseño correspondientes con las tablas de BootStrap. Siguiendo el ejemplo de la tabla anterior, añadimos a <table> la siguiente clase class="table":

Tabla sencilla con BootStrap

<table class="table">
  <tr>
    <th>Art&iacute;culo</th>
    <th>Serie</th>
    <th>Peso</th>
    <th>Almacén</th>
    <th>Stock</th>
    <th>Precio</th>
  </tr>
  <tr>
    <td>Producto 1</td>
    <td>3769797</td>
    <td>36 kg</td>
    <td>Madrid</td>
    <td>350</td>
    <td>8,95 €</td>
  </tr>
  <tr>
    <td>Producto 2</td>
    <td>7432309</td>
    <td>17 kg</td>
    <td>Barcelona</td>
    <td>72</td>
    <td>3,70 €</td>
  </tr>
</table>

En el resultado podemos comprobar que la tabla con BootStrap ha sido dotada de diseño. A partir de aquí las posibilidades son muy variadas. En el siguiente ejemplo, vamos a condensar las filas para que el contenido esté un poco más comprimido, añadiendo la clase .table-condensed, daremos formato a la tabla con un borde con la clase .table-bordered y haremos dinámica cada fila con .table-hover que podemos comprobar al pasar el ratón por cada una.

Tabla con BootStrap condensada con borde y dinámica

<table class="table table-condensed table-bordered table-hover">

Observamos que es muy sencillo dotar de formato a la tabla con tan solo ir añadiendo las clases que incluye el framework BootStrap. A continuación, vamos a transformar la tabla en adaptativa o responsive objeto de este tutorial añadiendo un <div> con la clase .table-responsive que encierre toda la tabla:

Tabla con BootStrap condensada y responsive

<div class="table-responsive">
  <table class="table table-condensed table-bordered table-hover">
  <tr>
    <th>Art&iacute;culo</th>
    <th>Serie</th>
    <th>Peso</th>
    <th>Almacén</th>
    <th>Stock</th>
    <th>Precio</th>
  </tr>
  <tr>
    <td>Producto 1</td>
    <td>3769797</td>
    <td>36 kg</td>
    <td>Madrid</td>
    <td>350</td>
    <td>8,95 €</td>
  </tr>
  <tr>
    <td>Producto 2</td>
    <td>7432309</td>
    <td>17 kg</td>
    <td>Barcelona</td>
    <td>72</td>
    <td>3,70 €</td>
  </tr>
  </table>
</div>

Fuente: http://getbootstrap.com/css/#tables-responsive