Tablas en Bootstrap 5: clases para darles estilo

Las tablas son un componente esencial para organizar y presentar datos de manera estructurada en una página web. Proporcionan una forma eficiente y atractiva de mostrar información en filas y columnas, lo que facilita la comprensión y navegación de los datos por parte de los usuarios. El sistema de tablas en Bootstrap 5 es altamente versátil y flexible, permitiendo crear tablas con diversas opciones de diseño y estilo.
Además, las tablas en Bootstrap 5 son completamente responsivas, lo que significa que se adaptan automáticamente a diferentes tamaños de pantalla, garantizando una experiencia de usuario óptima tanto en dispositivos móviles como en computadoras de escritorio.
Las tablas en Bootstrap 5 pueden incluir encabezados, cuerpos y pies de tabla, lo que facilita la organización de la información en secciones y proporciona una estructura lógica para los datos presentados. Además, es posible agregar clases de estilo a las tablas para resaltar elementos específicos, como filas seleccionadas, celdas destacadas o tablas de colores alternos.
9. Clases para dar estilo a las Tablas en Bootstrap 5
En Bootstrap 5, puedes crear tablas utilizando el elemento HTML <table>
junto con las clases de Bootstrap que te permiten dar estilo y mejorar la visualización de los datos. Para darle el estilo predefinido de Bootstrap a una tabla debemos asignarle la clase .table
. Ejemplo de tabla:
<table class="table"> <caption>Tabla 1. Tabla básica</caption> <thead> <tr> <th>Producto</th> <th>Cantidad</th> <th>Precio</th> </tr> </thead> <tbody> <tr> <td>Ratón</td> <td>15</td> <td>100</td> </tr> <tr> <td>Teclado</td> <td>34</td> <td>340</td> </tr> <tr> <td>Pantalla</td> <td>10</td> <td>400</td> </tr> </tbody> </table>
9.1. Clases para dar estilo a las tablas
En las siguiente tabla se recopilan las clases más relevantes para crear y dar estilo a las tablas en Bootstrap 5. Ten en cuenta que se pueden utilizar múltiples clases en una tabla.
Clase | Descripción |
---|---|
table | Clase base para crear una tabla básica |
table-striped | Alterna colores de fila para mejorar la legibilidad |
table-bordered | Añade bordes a las celdas de la tabla |
table-borderless | Elimina los bordes de la tabla y las celdas |
table-hover | Resalta las filas al pasar el ratón por encima |
table-active | Resaltar una fila o celda |
table-sm | Reduce el tamaño de fuente y el espaciado de la tabla, no se ajusta al contenedor |
table-responsive | Hace que la tabla sea responsive. Se pone en el contenedor padre de <table> |
.table-responsive-{xx} | Hace que la tabla sea responsive en los tamaños inferiores a los siguientes: .table-responsive-sm < 576px .table-responsive-md < 768px .table-responsive-lg < 992px .table-responsive-xl < 1200px |
.caption-top | Poner el título de la tabla arriba |
A continuación se muestra un ejemplo de uso para cada clase de la tabla 6.
Ejemplos
See the Pen
Bootstrap 5. Colores en los fondos de los textos by Eniun (@Eniun)
on CodePen.0
9.2. Colorear tablas
Veamos las clases que se pueden utilizar para colorear las tablas.
Clase | Descripción |
---|---|
table-dark | Aplica un tema oscuro a la tabla. |
table-light | Aplica un tema claro a la tabla. |
table-primary | Aplica un color de fondo de estilo primario a la tabla. |
table-secondary | Aplica un color de fondo de estilo secundario a la tabla. |
table-success | Aplica un color de fondo de estilo éxito a la tabla. |
table-danger | Aplica un color de fondo de estilo peligro a la tabla. |
table-warning | Aplica un color de fondo de estilo advertencia a la tabla. |
table-info | Aplica un color de fondo de estilo informativo a la tabla. |
table-light | Aplica un color de fondo de estilo claro a la tabla. |
table-dark | Aplica un color de fondo de estilo oscuro a la tabla. |
table-active | Resalta una fila o celda específica con un color de fondo activo. |
Ejemplos
0
9.3. Alineamiento horizontal y vertical de los textos en las tablas
En Bootstrap 5, puedes alinear verticalmente y horizontalmente el contenido de las celdas de una tabla utilizando las siguientes clases:
Clase | Descripción |
---|---|
align-middle | Alinea el contenido verticalmente al centro de la celda. |
align-top | Alinea el contenido verticalmente en la parte superior de la celda. |
align-bottom | Alinea el contenido verticalmente en la parte inferior de la celda. |
text-start | Alinea el texto a la izquierda |
text-center | Alinea el texto al centro |
text-end | Alinea el texto a la derecha |
Ejemplo:
<table class="table"> <tbody> <tr> <td class="align-middle">Contenido centrado verticalmente</td> <td class="align-top">Contenido arriba</td> <td class="align-bottom">Contenido abajo</td> </tr> <tr> <td class="text-start">Texto alineado a la izquierda</td> <td class="text-center">Texto centrado</td> <td class="text-end">Texto alineado a la derecha</td> </tr> </tbody> </table>
Ejemplos
0
En el siguiente punto del tutorial veremos las clases para las imágenes en Bootstrap5.