# Tablas

Bootstrap también define una serie de clases para aplicar estilos sobre las tablas de HTML. La más básica es la clase `.table`:

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

![Ejemplo de tabla](https://2314405326-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LwrBJxd5Ij-3wFpElqL%2F-LwrBKvBMchIeck8DU34%2F-LwrBOkC1rFrunqmKonr%2Ftable_1.png?generation=1577179026200450\&alt=media)

**Colores alternos**

Si además aplicamos la clase `.table-striped` a nuestra tabla conseguiremos que las filas presenten colores alternos:

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

![Ejemplo de tabla](https://2314405326-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LwrBJxd5Ij-3wFpElqL%2F-LwrBKvBMchIeck8DU34%2F-LwrBOkE9a79JHrBCZlm%2Ftable_striped.png?generation=1577179026000377\&alt=media)

**Tablas con bordes**

También podemos dibujar un borde al rededor de la tabla añadiendo la clase `.table-bordered`, de la forma:

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

![Ejemplo de tabla](https://2314405326-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LwrBJxd5Ij-3wFpElqL%2F-LwrBKvBMchIeck8DU34%2F-LwrBOkGNGy29znYHwhj%2Ftable_bordered.png?generation=1577179026644174\&alt=media)

**Tablas&#x20;*****Responsive***

Bootstrap proporciona una forma de crear tablas *responsive* que se basa en crear un *scroll* horizontal para que se vean correctamente. Para que esto funcione tenemos que crear una caja contenedora a nuestra tabla con la clase `.table-responsive`:

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

![Ejemplo de tabla responsive](https://2314405326-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LwrBJxd5Ij-3wFpElqL%2F-LwrBKvBMchIeck8DU34%2F-LwrBOkIvXBUKiSO9YG-%2Ftable_responsive.png?generation=1577179026338861\&alt=media)

> *Nota*: este efecto se aplicará únicamente sobre dispositivos pequeños (`<768px`) mientras que en el resto de dispositivos no se notará la diferencia.