Tablas estilo cebra con Bootstrap

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.

Cargar Bootstrap

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

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

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

<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.

Crear una tabla básica

Ahora insertamos la tabla. Para el manejo de las tablas Bootstrap nos proporciona la clase “table”. Así que definiremos la tabla de la siguiente forma:

<table class="table">
  <tr>
    <td>País</td>
    <td>Capital</td>
    <td>Superficie</td>
    <td>Habitantes</td>
  </tr>
  <tr>
    <td>España</td>
    <td>Madrid</td>
    <td>504.645 km<sup>2</sup></td>
    <td>46,6 M</td>
  </tr>
</table>

Aplicar el estilo cebra

Si queremos tener 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:

<table class="table table-striped">
  <tr>
    <td>País</td>
    <td>Capital</td>
    <td>Superficie</td>
    <td>Habitantes</td>
  </tr>
  <tr>
    <td>España</td>
    <td>Madrid</td>
    <td>504.645 km<sup>2</sup></td>
    <td>46,6 M</td>
  </tr>
</table>

Uso con thead y tbody

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.