1. Tabla básica
Mediante la clase .table le agregamos un estilo básico a nuestra tabla (divisiones horizontales.):
Ejemplo:
2. Tabla con filas en colores alternos
Con la clase .table-striped agregamos filas con colores alternos:
Ejemplo:
3. Tabla con bordes
La clase .table-bordered agrega bordes en todos los lados de la tabla y celdas:
Ejemplo
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:
5. Tabla negra / oscura
La clase .table-dark agrega un fondo negro a la tabla:
Ejemplo:
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:
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 apendizaje