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:

  1. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  2. <link rel="stylesheet" href="/css/bootstrap.min.css">

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

  1. <script src="/js/bootstrap.min.js"></script>

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:

  1. <table class="table">
  2. <th>País</th>
  3. <th>Capital</th>
  4. <th>Superficie</th>
  5. <th>Habitantes</th>
  6. </tr>
  7. </thead>
  8. <td>España</td>
  9. <td>Madrid</td>
  10. <td>504.645 km<sup>2</sup></td>
  11. <td>46,6 M</td>
  12. </tr>
  13. ...
  14. </tbody>
  15. </table>

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:

  1. <table class="table table-striped">
  2. <th>País</th>
  3. <th>Capital</th>
  4. <th>Superficie</th>
  5. <th>Habitantes</th>
  6. </tr>
  7. </thead>
  8. <td>España</td>
  9. <td>Madrid</td>
  10. <td>504.645 km<sup>2</sup></td>
  11. <td>46,6 M</td>
  12. </tr>
  13. ...
  14. </tbody>
  15. </table>

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


Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

¿Algo que nos quieras comentar?

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

*

*