Accesos
newsboletin

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>
Artículo Serie Peso Almacén Stock Precio
Producto 1 3769797 36 kg Madrid 350 8,95 €
Producto 2 7432309 17 kg Barcelona 72 3,70 €

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>
Artículo Serie Peso Almacén Stock Precio
Producto 1 3769797 36 kg Madrid 350 8,95 €
Producto 2 7432309 17 kg Barcelona 72 3,70 €

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">
Artículo Serie Peso Almacén Stock Precio
Producto 1 3769797 36 kg Madrid 350 8,95 €
Producto 2 7432309 17 kg Barcelona 72 3,70 €

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>
Artículo Serie Peso Almacén Stock Precio
Producto 1 3769797 36 kg Madrid 350 8,95 €
Producto 2 7432309 17 kg Barcelona 72 3,70 €

Para poder apreciar éste último ejemplo desde un ordenador de sobremesa, copia la URL (dirección web) de este tutorial y pégalo en esta web http://ami.responsivedesign.is/ para ver los resultados en los diferentes dispositivos de visualización. Fíjate también en las demás tablas del tutorial y compárala con esta última.


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

Este tutorial está basado en el framework Bootstrap 3.0 o superior para las plantillas web Athenea y Pharma de WordPress. Puedes descargar ambas plantillas desde http://www.ibermega.com/themes e instalarlas para practicar con este y otros tutoriales. Ver índice.


Un pensamiento en “Tablas HTML responsive con BootStrap

Deja un comentario

  Acepto losPolítica de privacidad

Muy importante.- No es necesario registrarse para publicar una opinión o comentario, pero si es necesario introducir su nombre y correo electrónico para evitar el SPAM. Además, no utilizaremos los datos insertados para otras cuestiones que difieren de esta publicación. En cualquier momento puede solicitar la eliminación de los mismos, enviando una solicitud al correo de contacto y con el mismo correo que ha emitido la opinión o comentario para que en un plazo máximo de 72 horas se elimina.

INFORMACIÓN ADICIONAL SOBRE PROTECCIÓN DE DATOS:

  • Responsable: IBERMEGA TSEO, SL
  • Finalidad del tratamiento: Control de spam, gestión de comentarios, comunicaciones y promociones.
  • Legitimación: Su consentimiento
  • Transferencia de datos: Tus datos no se cederán a terceros, salvo por obligación legal.
  • Derechos: Acceso, rectificación, portabilidad, olvido.
  • Email de contacto: oficina@ibermega.com

Copyright © 2002-2020 by IBERMEGA TSEO, S.L.