Tablas estilo cebra con Bootstrap

08/Jun/2015 Bootstrap Deja un comentario

Si no eres de los que se quiere entretener con el CSS o buscas una forma sencilla de dar formato a los elementos de tu página, Bootstrap es tu solución y una gran ayuda para tus diseños.

Por ejemplo, si estamos trabajando con tablas puede ser que queramos tener tablas estilo cebra mediante CSS. Esas que tienen las líneas pares de un color y las líneas impares de otro. Aquí vamos a ver lo sencillo que es tener tablas estilo cebra con Bootstrap.

Lo primero a la hora de trabajar con Bootstrap es cargar el viewport y la hoja de estilo de Bootstrap en la cabecera:


Y lo segundo será cargar el framework Bootstrap al final de la página.

Es recomendable que la carga del script de Bootstrap sea la última línea de tu página, antes del elemento de cierre de body para evitar tener problemas.

Ahora insertarmos la tabla. Para el manejo de las tablas Bootstrap nos proporciona la clase «table». Así que definiremos la tabla de la siguiente forma:


...
País Capital Superficie Habitantes
España Madrid 504.645 km2 46,6 M

Si queremos tener una tablas estilo cebra con Bootstrap deberemos de añadir, además de la clase table, la clase table-striped.

Así el código a escribir es el siguiente:


...
País Capital Superficie Habitantes
España Madrid 504.645 km2 46,6 M

Una cosa importante que tenemos que saber a la hora de crear tablas estilo cebra con Bootstrap es que si utilizamos las agrupaciones thead, tbody,... el estilo de tipo cebra solo se aplicará a los elementos que estén dentro de la agrupación tbody, dejando de lado la cabecera.

Vídeos sobre Bootstrap


¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.