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.

También te puede interesar

Un pensamiento en “Tablas HTML responsive con BootStrap

Inserta un comentario

El correo no se mostrará ;)