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} {sm-md-lg-xl-xxl}	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.