Mis apuntes de desarrollo web </>

Cabecera de la tabla:

Disponemos las clases "thead-light" y ".thead-dark" para aplicar a la etiqueta "thead" de una tabla.

thead-light:

thead-dark:

Filas con colores alternados:

Una actividad común es mostrar una tabla HTML con colores que se van alternando para facilitar la lectura de sus datos, sobre todo cuando hay tablas con muchas columnas y filas.

Esta actividad se logra agregando la clase table-striped a la marca table.

Borde en cada celda:

Por defecto una tabla en Bootstrap 4 solo las filas tienen una línea separadora, si se quiere que todas las celdas aparezcan recuadradas se debe añadir la clase "table-bordered".

Fila con hover:

Si se quiere que se muestre la fila donde se encuentra el mouse con un color distinto se agrega la clase "table-hover".

Tabla pequeña:

Si hay que mostrar grandes tablas con datos puede ser necesario mostrar más información al mismo tiempo por pantalla condensando los datos (son los mismos datos pero más comprimidos en pantalla)

Esto se logra agregando la clase "table-sm" a la marca HTML "table".

Etiqueta <caption>:

En Bootstrap 4, el titulo de la tabla se ubicará en la parte inferior de esta.

Tabla responsive:

Cuando hay tablas con muchas columnas y dependiendo del tamaño del dispositivo se puede hacer que aparezca una barra de desplazamiento en la parte inferior de la tabla.

Esta característica la resuelve Bootstrap 4 mediante las clases:

table-responsive:

Sin importar el punto de ruptura la tabla siempre será responsive.

table-responsive-sm:

Punto de ruptura de min-width: 576px y max-width: 767.98px

table-responsive-md:

Punto de ruptura de min-width: 768px y max-width: 991.98px

table-responsive-lg:

Punto de ruptura de min-width: 992px y max-width: 1199.98px

table-responsive-xl:

Punto de ruptura de min-width: 1200px