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.

¡SIGAMOS EN CONTACTO!

¡Nos encantaría tenerte al día con nuestras últimas noticias y ofertas! 😎

¡No enviamos spam! Lee nuestra política de privacidad para más información.

Publicaciones relacionadas

Renting Web, la revolución web ha llegado

Renting Web, la revolución web ha llegado

Renting Web es un servicio organizado pensando en pequeñas y medianas empresas, consiste en el diseño y mantenimiento de páginas web abonadas en cómodas cuotas. La idea es abonar mensualmente una cuota similar a la que pagaría por disponer de servidor, este pago incluye lo que conocemos como todo incluido. Esto se refiere a los […]

Enlace permanente de WordPress

Enlace permanente de WordPress

El enlace permanente de WordPress tiene influencia en el ranking de tráfico y motores de búsqueda de tu sitio web, aunque no sea muy evidente. No es recomendable pasar desapercibidos estos enlaces. Elegirlos erróneamente puede ser perjudicial y es difícil de cambiar, a futuro se puede perder la conexión a su sitio. El enlace permanente […]

¿Qué es Google Authenticator?

¿Qué es Google Authenticator?

Si deseas mantener un buen nivel de seguridad en WordPress, debes considerar utilizar el plugin de la autenticación de dos pasos para cuentas Google y otros servicios. Existe una manera sencilla de habilitar la autenticación de 2 pasos en WordPress utilizando Google Authenticator, con esto darás valor a tu blog y seguridad. Google Authenticator funciona […]

¿Qué es el multisite de WordPress?

¿Qué es el multisite de WordPress?

El multisite de WordPress es un CMS (es decir, no hay que instalar nada especial, sólo activarla) que permite gestionar una red de webs desde una sola instalación de WordPress que, aunque nació como solución para blogs, actualmente cuenta con funcionalidades y capacidades que le hacen capaz de adaptarse a multitud de necesidades. Una de […]


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-2024 by IBERMEGA TSEO, S.L.