Artículos
Bootstrap

Tablas estilo cebra con Bootstrap

08/Jun/2015

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.

Código Fuente

Descárgate el código fuente de Tablas estilo cebra con Bootstrap
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Vídeos sobre Bootstrap

Disfruta también de nuestros artículos sobre Bootstrap en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test Bootstrap

¿Te atreves a probar tus habilidades y conocimiento en Bootstrap con nuestro test?

Test Bootstrap
Suscribir
Notificar de
guest
0 Comentarios
Recientes
Anteriores Más votados
Opiniones integradas
Ver todos los comentarios