Tablas HTML responsive con BootStrap

Tabla ResponsiveAntiguamente, 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

ArtículoSeriePesoAlmacénStockPrecio
Producto 1376979736 kgMadrid3508,95 €
Producto 2743230917 kgBarcelona723,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

ArtículoSeriePesoAlmacénStockPrecio
Producto 1376979736 kgMadrid3508,95 €
Producto 2743230917 kgBarcelona723,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

ArtículoSeriePesoAlmacénStockPrecio
Producto 1376979736 kgMadrid3508,95 €
Producto 2743230917 kgBarcelona723,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

ArtículoSeriePesoAlmacénStockPrecio
Producto 1376979736 kgMadrid3508,95 €
Producto 2743230917 kgBarcelona723,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.

Publicaciones relacionadas

Ventanas modales con BootStrap y WordPress
Ventanas modales con BootStrap y WordPress

Lee más
Modificar los botones y enlaces para Anchor Text

Lee más
Como hacer un tema hijo en WordPress

Lee más

1 comentario sobre “Tablas HTML responsive con BootStrap

Danos tu opinión

  Acepto la política de privacidad

Muy importante.- No es necesario registrarse para publicar una opinión o comentario, pero si se requiere insertar su nombre y correo electrónico para evitar el SPAM. Además, no utilizaremos los datos insertados para otros asuntos que difieran de esta publicación. En cualquier momento puede solicitar la eliminación de la misma enviando un correo electrónico a soporte@ibermega.com y con el mismo correo electrónico con el que ha emitido la opinión o comentario para que en un plazo máximo de 72 horas sea eliminado.

Información adicional sobre protección de datos:

  • Responsable: Miguel Angel Rico
  • Fin del tratamiento: Controlar el spam, gestión de comentarios
  • Legitimación: Tu consentimiento
  • Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal.
  • Derechos: Acceso, rectificación, portabilidad, olvido.
  • Contacto: soporte@ibermega.com.
  • Boletín Informativo: Si quieres, puedes suscribirte más abajo a nuestra lista de correos.
  • Información adicional: Más información en nuestra política de privacidad apartado 1.3. Finalidades.

10 visitantes ahora
IBERMEGA