Tutorial de Bootstrap 3: Las tablas

Prohibido usar las tablas para estructurar el diseño de nuestra Web , ésta práctica se dejó de utilizar a principio del 2000 y no por capricho. Para estructurar nuestra web, veremos en el próximo capítulo de este tutorial como estructurar con el sistema de rejilla de Bootstrap.

Por qué no usar tablas

• No es amigable de cara a los buscadores, por tanto nuestro posicionamiento se verá perjudicado.
• Con el uso de tablas haremos que nuestra Web tarde más en cargar porque añadimos código redundante.
• No es flexible.
• El mismísimo creador de las tablas nos dijo que no la utilizásemos.

Así que dejando este punto aclarado ¿Para qué se utilizan las tablas? Exacto, para hacer tablas. No se recomienda el uso excesivo de tablas en nuestras Webs, pero si que nos pueden venir muy bien para presentar cualquier elemento tabulado .

Hacer una tabla

Vamos a explicar como hacer una tabla en HTML5 de forma muy resumida:

Para crear una tabla, utilizamos la etiqueta table , dentro de ella utilizamos la etiqueta tr para crear filas, y dentro de tr utilizamos etiquetas td para dividir dicha fila en columnas. Hay una variación de la etiqueta td que es th, que se utiliza para darle título a las columnas. La mejor forma de verlo, es en un ejemplo de una tabla básica, vamos a ello:

Podéis tener por fila, cuantas columnas queráis. Ahora ya que tenemos una tabla básica le vamos a dar estilos con Bootstrap. Recomiendo que hagáis vuestra propia tabla y practiquéis.

Tabla sencilla

Bootstrap no da estilo al utilizar la etiqueta table , así que nosotros le asignaremos el estilo .table para darle formato.

Listas coloreadas

Para mejorar la lectura de la tabla, podemos darle color gris al fondo de las filas pares. Añadimos el estilo .table-striped junto al estilo .table separándolo por un espacio.

Tablas dinámicas

Usando el estilo .table-hover , conseguiremos que cuando pasemos el cursor por encima de una fila, cambie su color de fondo para mejorar la lectura de dicha fila y de la tabla en general.

Tablas responsive

Como bien sabes ya, Bootstrap está enfocado para crear nuestro diseño responsive, es decir, que nuestra Web se adapte a la pantalla de cualquier dispositivo con el que accedemos a ella. La solución que da Bootstrap, es que si accedemos desde un dispositivo con pantalla menor a 768px muestra un scroll horizontal para ver la tabla completa.

Lo que tenemos que hacer es meter nuestra tabla en un div, y darle estilo .table-responsive . Si queremos ver el resultado de esta tabla, debemos de minimizar nuestro navegador, verás como aparece el scroll horizontal.

Tienes más ejemplos de columnas en la documentación oficial.