Tablas en Bootstrap 4

1. Tabla básica

Una tabla básica Bootstrap 4 tiene un relleno y divisiones horizontales. Mediante la clase .table le agregamos un estilo básico a nuestra tabla:

Ejemplo:

default

2. Tabla con filas en colores alternos

Con la clase .table-striped agregamos filas con colores alternos:

Ejemplo:

default

3. Tabla con bordes

La clase .table-bordered agrega bordes en todos los lados de la tabla y celdas:

Ejemplo

default

4. Tabla con efecto hover

La clase .table-hover agrega un efecto al hacer :hover con el ratón en las filas de la tabla:

Ejemplo:

default

5. Tabla negra / oscura

La clase .table-dark agrega un fondo negro a la tabla:

Ejemplo:

default

6. Clases contextuales

Las clases contextuales se pueden usar para colorear toda la tabla ( <table> ), las filas de la tabla ( <tr> ) o las celdas de la tabla ( <td> ).

Las clases contextuales que se pueden usar son:

• .table-primary Azul: indica una acción importante.
• .table-success Verde: Indica una acción exitosa o positiva.
• .table-danger Rojo: indica una acción peligrosa o potencialmente negativa.
• .table-info Azul claro: indica un cambio informativo neutral o acción.
• .table-warning Naranja: indica una advertencia que podría necesitar atención.
• .table-active Gris: aplica el color de desplazamiento a la fila de la tabla o celda de la tabla.
• .table-secondary Gris: Indica una acción menos importante.
• .table-light Fondo gris claro.
• .table-dark Fondo Gris oscuro.

Ejemplo:

default

7. Colores del encabezado de la tabla

La clase .thead-dark agrega un fondo negro a los encabezados de la tabla, y la clase .thead-light agrega un fondo gris a los encabezados de la tabla:

8. Tablas responsive

La clase .table-responsive crea una tabla responsive: se agrega una barra de desplazamiento horizontal a la tabla en pantallas que tienen menos de 992px de ancho (si es necesario). 

.table-responsive-sm < 576px
.table-responsive-md < 768px
.table-responsive-lg < 992px
.table-responsive-xl < 1200px

Comprueba tu aprendizaje