Tablas en Bootstrap 5

Las tablas son componentes fundamentales en el diseño web, utilizadas para mostrar datos de forma organizada y legible. Bootstrap 5 ofrece un conjunto robusto de clases y estilos para crear tablas responsivas y visualmente atractivas con facilidad.

En esta guía, exploraremos en detalle cómo trabajar con tablas en Bootstrap 5, desde la estructura básica hasta características avanzadas, acompañadas de ejemplos prácticos para ilustrar su uso.

Estructura Básica de una Tabla

Antes de profundizar en las características avanzadas, es importante comprender la estructura básica de una tabla en Bootstrap 5. Una tabla estándar consta de las siguientes etiquetas HTML:


<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Nombre</th>
      <th scope="col">Apellido</th>
      <th scope="col">Edad</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>John</td>
      <td>Doe</td>
      <td>30</td>
    </tr>
    <!-- Otras filas -->
  </tbody>
</table>

Lenguaje del código: HTML, XML (xml)

En esta estructura básica, <thead> define el encabezado de la tabla que contiene las etiquetas <th> para las columnas, y <tbody> contiene el cuerpo de la tabla con las filas representadas por <tr> y los datos de cada celda dentro de <td>.

Características Avanzadas de Tablas en Bootstrap 5

Colorear Filas y Columnas

Puedes aplicar diferentes colores de fondo a filas y columnas para resaltar la información importante. Bootstrap 5 proporciona clases específicas para este propósito:

  • table-primary
  • table-secondary
  • table-success
  • table-danger
  • table-warning
  • table-info
  • table-light
  • table-dark

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Nombre</th>
      <th scope="col">Apellido</th>
      <th scope="col">Edad</th>
    </tr>
  </thead>
  <tbody>
    <tr class="table-primary">
      <th scope="row">1</th>
      <td>John</td>
      <td>Doe</td>
      <td>30</td>
    </tr>
    <!-- Otras filas -->
  </tbody>
</table>

Lenguaje del código: HTML, XML (xml)

Tablas Listadas y Responsivas

Puedes hacer que las tablas sean más compactas y responsivas para dispositivos móviles utilizando las clases table-sm y table-responsive. La clase table-sm reduce el tamaño de las celdas y la clase table-responsive envuelve la tabla en un contenedor que permite desplazamiento horizontal en dispositivos pequeños.


<div class="table-responsive">
  <table class="table table-sm">
    <!-- Contenido de la tabla -->
  </table>
</div>

Lenguaje del código: HTML, XML (xml)

Estilos de Encabezado

Bootstrap 5 ofrece estilos adicionales para los encabezados de tabla, permitiendo opciones como texto con alineación vertical, texto truncado, y más:

  • thead-dark y thead-light para cambiar el color de fondo del encabezado.
  • text-center, text-end, y text-start para alinear el texto en el encabezado.

<table class="table">
  <thead class="thead-dark">
    <tr>
      <th scope="col" class="text-center">#</th>
      <th scope="col" class="text-start">Nombre</th>
      <th scope="col" class="text-end">Apellido</th>
      <th scope="col">Edad</th>
    </tr>
  </thead>
  <tbody>
    <!-- Filas de datos -->
  </tbody>
</table>

Lenguaje del código: HTML, XML (xml)

Ejemplos Prácticos

Tabla Básica


<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Nombre</th>
      <th scope="col">Apellido</th>
      <th scope="col">Edad</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>John</td>
      <td>Doe</td>
      <td>30</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jane</td>
      <td>Smith</td>
      <td>25</td>
    </tr>
  </tbody>
</table>

Lenguaje del código: HTML, XML (xml)

Tabla con Colores


<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Nombre</th>
      <th scope="col">Apellido</th>
      <th scope="col">Edad</th>
    </tr>
  </thead>
  <tbody>
    <tr class="table-primary">
      <th scope="row">1</th>
      <td>John</td>
      <td>Doe</td>
      <td>30</td>
    </tr>
    <tr class="table-secondary">
      <th scope="row">2</th>
      <td>Jane</td>
      <td>Smith</td>
      <td>25</td>
    </tr>
  </tbody>
</table>

Lenguaje del código: HTML, XML (xml)

Tabla Responsiva


<div class="table-responsive">
  <table class="table">
    <!-- Contenido de la tabla -->
  </table>
</div>

Lenguaje del código: HTML, XML (xml)

Conclusiones

Las tablas en Bootstrap 5 son herramientas versátiles que te permiten mostrar datos de forma estructurada y legible en tus proyectos web. Desde la estructura básica hasta las características avanzadas como colores y estilos de encabezado, Bootstrap 5 proporciona una variedad de opciones para personalizar tus tablas y adaptarlas a tus necesidades específicas.

Con esta guía y ejemplos prácticos, ahora estás equipado para crear tablas funcionales y estilizadas utilizando Bootstrap 5 en tus proyectos web. ¡Experimenta con diferentes opciones y descubre cómo las tablas pueden mejorar la presentación de tus datos en línea!