TechBlogSD - Todo para WordPress y desarrollo WEB
Instrucciones de WEB y WordPress, noticias, reseñas de temas y complementos

¿Cómo crear tablas Bootstrap 5?

10

Bootstrap permite crear hermosas tablas utilizando el marco CSS. La versión 4 tiene algunas clases nuevas para invertir el color de la tabla y hacer que la tabla responda. Puede diferentes tipos de tablas fácilmente con la última versión 5 también. En este tutorial discutiremos varias posibilidades de crear tablas con Bootstrap 5. Puede descargar los archivos utilizados en este tutorial aquí.

etiquetas. En nuestro ejemplo, creemos una hoja de calificación simple en un formato de tabla con cuatro nombres de estudiantes (en filas) y cinco materias con porcentaje promedio (en columnas). A continuación se muestra el código de la tabla Bootstrap predeterminada.

De forma predeterminada, la única clase CSS necesaria para crear una tabla Bootstrap es la clase "tabla" aplicada directamente en el elemento de la tabla HTML. No es necesario crear una

etiqueta para insertar tablas en Bootstrap. La etiqueta predeterminada producirá el siguiente resultado:

¿Cómo crear tablas Bootstrap 5?

Invertir los colores de la tabla

Bootstrap 4 le permite invertir el color de su tabla agregando "tabla inversa" a la

etiqueta. Invertirá el fondo en oscuro y el texto en colores claros. El código debería verse como a continuación:

<table class="table table-inverse"> All content remains same here similar to default table. <table>

La tabla inversa tendrá un fondo muy oscuro y atractivo como se muestra a continuación:

¿Cómo crear tablas Bootstrap 5?

Tabla de encabezado inverso

En el caso anterior, la clase "table-inverse" se aplicó a toda la tabla. Bootstrap 4 también permite invertir solo el fondo del encabezado y los colores del texto. Para invertir el encabezado, simplemente agregue la clase "thead-inverse" al

etiqueta.

<table class="table"> <thead class="thead-inverse"> </thead> </table>

Y nuestra tabla de hojas de marcas tendrá una fila de encabezado negra como la siguiente:

¿Cómo crear tablas Bootstrap 5?

¡¡¡Eso no es todo!!! Hay muchas más opciones con Bootstrap. Creemos algunas variaciones más.

Tabla Bootstrap 4 a rayas

La tabla de rayas le permite crear colores alternativos para las filas. Simplemente agregue "table-striped" a la clase "table" existente "y la tabla tendrá un patrón de rayas. El color de fondo gris claro se aplicará a todas las filas impares a partir de la primera fila.

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

La tabla rayada se prefiere principalmente para diferenciar las filas y mostrar el contenido a los visitantes.

¿Cómo crear tablas Bootstrap 5?

Bootstrap Bordered Table

Este simplemente agregará el borde a la tabla predeterminada. Lo que necesita es agregar la clase "table-bordered" a la clase "table" existente.

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

Nuestra tabla de hojas de marca con borde debería verse a continuación:

¿Cómo crear tablas Bootstrap 5?

También puede crear fácilmente la tabla bordeada con rayas en filas.

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

Tabla con efectos de desplazamiento en filas

¿Qué tal agregar efectos de desplazamiento a su mesa? La clase "table-hover" lo hará por usted. Pase el mouse sobre la tabla para ver que la fila correspondiente está resaltada con un color de fondo gris claro.

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

A continuación se muestra cómo debería verse su tabla cuando mueve el mouse en la segunda fila.

¿Cómo crear tablas Bootstrap 5?

Tabla de Bootstrap receptiva para dispositivos de menos de 768 píxeles

Crear una tabla receptiva en Bootstrap 4 es muy simple. No es necesario agregar más

para agregar capacidad de respuesta. Simplemente inserte la clase "sensible a la tabla", una barra de desplazamiento horizontal se agregará automáticamente a la tabla cuando se vea en el navegador con un tamaño de pantalla inferior a 768 píxeles.

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

Así es como se verá nuestra tabla receptiva. Recuerde que la barra de desplazamiento horizontal solo aparecerá cuando la tabla se vea con un tamaño de pantalla menor a 768 píxeles. De lo contrario, no encontrará ninguna diferencia en comparación con la tabla Bootstrap normal.

¿Cómo crear tablas Bootstrap 5?

Tabla Bootstrap con texto comprimido

En ocasiones es necesario comprimir la altura de la mesa para reducir el espacio ocupado. Bootstrap permite hacer esto agregando la clase "table-sm" a una clase "table" existente como se muestra a continuación:

<table class="table table-sm"> </table>

Esto eliminará el acolchado y hará que la altura de la mesa sea compacta.

¿Cómo crear tablas Bootstrap 5?

Creación de una tabla de Bootstrap con color de fondo

A partir de ahora, lo que hemos discutido es crear una tabla simple o tener un fondo gris claro predeterminado para las filas. Bootstrap también permite colorear las celdas y filas de la tabla para hacerla hermosa. Puede resaltar cualquier fila o celda de su tabla en cinco colores diferentes. Hay dos conjuntos de clases de CSS que le ayudan a agregar colores de fondo: una son las clases contextuales y la otra las clases de utilidad de fondo. La siguiente tabla explica las diferentes opciones disponibles:

Clases contextuales de tabla
mesa activa Color de desplazamiento gris claro
éxito en la mesa Éxito verde claro o acción positiva
tabla-info Azul claro para mensaje de información
advertencia de mesa Amarillo claro para indicar advertencia
mesa-peligro Rojo claro para indicar peligro
tabla-primaria Azul claro para indicar el color primario en Bootstrap
secundaria de mesa Rojo claro para indicar peligro
luz de mesa Gris claro para indicar que no hay color
mesa oscura Negro claro para indicar oscuridad
Utilidad de fondo / clases contextuales
bg-primaria Azul medio como color primario
bg-éxito Verde bosque para el éxito
bg-advertencia

Color verde de libertad de expresión  para advertencia

bg-info Luz verde mar para información
bg-peligro Rojo (cinabrio) por peligro
bg-light Soledad por la luz
bg-oscuro Color espejismo para oscuridad
bg-secundario Color de aluminio para secundaria

Recuerde que estas clases se pueden aplicar a filas y celdas individuales de la tabla Bootstrap en cualquier combinación.

Filas de colores con clases contextuales

Apliquemos las clases contextuales en nuestra tabla de hoja de calificaciones para verlas en acción. El siguiente código aplica la clase "table-active" a la primera fila de la tabla para cambiar el color de fondo a gris claro.

<table class="table"> <tr class="table-active"> <td>Thomas</td> <td>80</td> <td>90</td> <td>70</td> <td>80</td> <td>75</td> <td>79</td> </tr> <tr> </table>

A continuación se muestra cómo se verá la tabla completa cuando aplique las clases "table-success", "table-warning" y "table-danger" a la segunda, tercera y cuarta

elementos de la mesa.

¿Cómo crear tablas Bootstrap 5?

Filas coloreadas con colores de fondo

De manera similar a las clases contextuales de tabla, puede aplicar colores de fondo a las filas utilizando clases contextuales de fondo.

<table class="table"> <tr class="bg-success"> <td>Thomas</td> <td>80</td> <td>90</td> <td>70</td> <td>80</td> <td>75</td> <td>79</td> </tr> <tr> </table>

A continuación se muestra una tabla llamativa que tiene "bg-success", "bg-danger", "bg-warning", "bg-info" y otras clases de utilidad de fondo aplicadas a las filas.

¿Cómo crear tablas Bootstrap 5?

Celdas coloreadas con clases contextuales

Cada celda de una tabla Bootstrap se puede aplicar con una de las clases contextuales para resaltarla de otras celdas. Esto será realmente útil cuando tenga una tabla más grande y desee resaltar solo unas pocas celdas. El siguiente código muestra la aplicación de la clase contextual "activa en la tabla" a una celda de la tabla.

<table class="table"> <tr> <td>Thomas</td> <td class="table-active">80</td> <td>90</td> <td>70</td> <td>80</td> <td>75</td> <td>79</td> </tr> <tr> </table>

La siguiente tabla tiene cuatro celdas aplicadas con diferentes colores de fondo al azar.

¿Cómo crear tablas Bootstrap 5?

Filas y celdas coloreadas con colores de fondo y clases contextuales

Finalmente, puede aplicar la clase contextual de tabla y la clase contextual de fondo en cualquier combinación para crear diferentes colores de fondo para filas y celdas.

<table class="table"> <tr class="table-active"> <td>Thomas</td> <td class="table-info">80</td> <td>90</td> <td>70</td> <td>80</td> <td>75</td> <td class="bg-success">79</td> </tr> <tr> </table>

Así es como se verá la tabla de ejemplo con varios colores aplicados para filas y celdas.

¿Cómo crear tablas Bootstrap 5?


Aprenda Bootstrap 5 (índice )


Fuente de grabación: webnots.com
Deja una respuesta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More