4.1.  Tablas

4.1.1.  Tablas básicas

Añade la clase .table a cualquier elemento <table> para aplicar los estilos básicos de Bootstrap 3 para tablas. El resultado es una tabla con un padding muy sutil y con líneas de separación solamente en las filas.

Puede parecer absurdo tener que añadir la clase .table para que se apliquen los estilos a las tablas, pero ten en cuenta que el elemento <table> se utiliza para muchas otras cosas que no son necesariamente tablas, como por ejemplo calendarios y selectores de fechas.

Ejemplo:

<table class="table">
  ...
</table>

Así se ve este ejemplo en tu navegador:

Y esta es la imagen del aspecto que debería tener este ejemplo:

Figura 4.1 Tabla básica en Bootstrap 3

4.1.2. Tablas cebreadas

Las tablas cebreadas son aquellas cuyas filas alternan su color de fondo para mejorar la legibilidad de los contenidos. Su aspecto recuerda a la piel de una cebra y de ahí su nombre. En inglés se denominan "striped tables" y por eso en Bootstrap 3 estas tablas se crean añadiendo la clase .table-striped. Ejemplo:

<table class="table table-striped">
  ...
</table>

Así se ve este ejemplo en tu navegador:

Y esta es la imagen del aspecto que debería tener este ejemplo:

Figura 4.2 Tabla cebreada en Bootstrap 3

4.1.3. Tablas con bordes

Si prefieres utilizar el estilo tradicional de las tablas con los cuatro bordes en todas las celdas y en la propia tabla, añade la clase .table-bordered. Ejemplo:

<table class="table table-bordered">
  ...
</table>

Así se ve este ejemplo en tu navegador:

Y esta es la imagen del aspecto que debería tener este ejemplo:

Figura 4.3 Tabla con bordes en Bootstrap 3

4.1.4. Tablas dinámicas

Para que los contenidos de la tabla sean todavía más fáciles de entender, añade la clase .table-hover para modificar ligeramente el aspecto de las filas cuando el usuario pasa el ratón por encima de ellas (sólo funciona para las filas dentro de <tbody>).

Ejemplo:

<table class="table table-hover">
  ...
</table>

Así se ve este ejemplo en tu navegador (pasa el ratón por encima de las filas para ver el efecto):

Y esta es la imagen del aspecto que debería tener este ejemplo:

Figura 4.4 Tabla dinámica en Bootstrap 3

4.1.5. Tablas condensadas

Cuando una tabla es muy grande o cuando tienes muchas tablas en una misma página, puede ser interesante mostrar sus contenidos de forma más compacta. Añade la clase .table-condensed a tus tablas y el padding se reducirá a la mitad. Ejemplo:

<table class="table table-condensed">
  ...
</table>

Así se ve este ejemplo en tu navegador:

Y esta es la imagen del aspecto que debería tener este ejemplo:

Figura 4.5 Tabla condensada en Bootstrap 3

4.1.6. Tablas semánticas

Las clases CSS semánticas explicadas en el capítulo anterior para el texto también se pueden aplicar a las filas y a las celdas de una tabla:

• .active, aplica el color del estado hover a la fila o celda para que parezca que está activa.
• .success, indica que el resultado de alguna operación ha sido un éxito.
• .warning, avisa al usuario que se ha producido alguna circunstancia que puede requerir su atención.
• .danger, indica que una acción es negativa o potencialmente peligrosa.

Ejemplo:

<table>
<tbody>
  <!-- Aplicadas en las filas -->
  <tr class="active">...</tr>
  <tr class="success">...</tr>
  <tr class="warning">...</tr>
  <tr class="danger">...</tr>

  <!-- Aplicadas en las celdas (<td> o <th>) -->
  <tr>
    <td class="active">...</td>
    <td class="success">...</td>
    <td class="warning">...</td>
    <td class="danger">...</td>
  </tr>
</tbody>
</table>

Así se ve este ejemplo en tu navegador:

Y esta es la imagen del aspecto que debería tener este ejemplo:

Figura 4.6 Tabla semántica en Bootstrap 3

4.1.7. Tablas responsive

La solución que propone Bootstrap 3 para crear tablas responsive que se vean bien en dispositivos pequeños consiste en añadir un scroll horizontal a las tablas que sean demasiado anchas. Para ello, encierra cualquier tabla con la clase .table dentro de un elemento con la clase .table-responsive. Cuando las tablas responsive se muestran en dispositivos con una anchura superior a 768px, se ven igual que cualquier otra tabla normal.

Ejemplo:

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Así se ve este ejemplo en tu navegador (el ejemplo se muestra con poca anchura para forzar a que la tabla sea responsive):

Y esta es la imagen del aspecto que debería tener este ejemplo:

Figura 4.7 Tabla responsive en Bootstrap 3