En esta clase del curso de Bootstrap 5, exploraremos cómo utilizar y personalizar tablas utilizando las clases predefinidas de Bootstrap. Este tutorial es parte de nuestra serie de videos diseñados para ayudarte a dominar Bootstrap 5.
Introducción
Bootstrap 5 proporciona una serie de clases para manejar tablas de manera sencilla y efectiva. Vamos a explorar las opciones más importantes y cómo implementarlas en tus proyectos.
Estructura Básica de una Tabla
Primero, vamos a crear una estructura básica de una tabla en HTML.
<table class="table">
<thead>
<tr>
<th>Nombre</th>
<th>Apellido</th>
<th>Twitter</th>
</tr>
</thead>
<tbody>
<tr>
<td>Kiko</td>
<td>Palomares</td>
<td>@kikopalomares</td>
</tr>
<tr>
<td>María</td>
<td>Gómez</td>
<td>@mariagomez</td>
</tr>
<tr>
<td>Juan</td>
<td>Pérez</td>
<td>@juanperez</td>
</tr>
</tbody>
</table>Implementación en Visual Studio Code
Crear un Archivo HTML: Crea un archivo HTML en Visual Studio Code y pega el ejemplo anterior.
Ver en el Navegador: Usa la extensión "Live Server" en Visual Studio Code para abrir el archivo HTML en el navegador y ver los cambios en tiempo real.
Añadir Clases de Bootstrap
Para estilizar la tabla, añadimos la clase table.
<table class="table">
<!-- contenido de la tabla -->
</table>Personalización de Tablas
Colores en las Tablas
Podemos cambiar el color de la tabla utilizando clases adicionales como table-primary, table-secondary, etc.
<table class="table table-primary">
<!-- contenido de la tabla -->
</table>Filas de Colores
Podemos aplicar colores a filas específicas.
<tr class="table-success">
<td>María</td>
<td>Gómez</td>
<td>@mariagomez</td>
</tr>
<tr class="table-danger">
<td>Juan</td>
<td>Pérez</td>
<td>@juanperez</td>
</tr>Celdas de Colores
También podemos aplicar colores a celdas específicas.
<td class="table-warning">@mariagomez</td>Tablas Striped (con Filas Alternadas)
Para añadir un efecto de filas alternadas, usamos la clase table-striped.
<table class="table table-striped">
<!-- contenido de la tabla -->
</table>Tablas Hover (con Efecto Hover)
Para resaltar una fila cuando el cursor pasa sobre ella, usamos la clase table-hover.
<table class="table table-hover">
<!-- contenido de la tabla -->
</table>Tablas Bordered (con Bordes)
Para añadir bordes a todas las celdas, usamos la clase table-bordered.
<table class="table table-bordered">
<!-- contenido de la tabla -->
</table>Tablas sin Bordes
Para eliminar los bordes, usamos la clase table-borderless.
<table class="table table-borderless">
<!-- contenido de la tabla -->
</table>Tablas Compactas
Para reducir el espacio entre celdas, usamos la clase table-sm.
<table class="table table-sm">
<!-- contenido de la tabla -->
</table>Alineación Vertical
Podemos alinear verticalmente el contenido de las celdas utilizando clases como align-top, align-middle, align-bottom.
<td class="align-middle">Texto Alineado al Centro</td>Títulos de Tabla (Captions)
Para añadir un título a la tabla, usamos la etiqueta <caption>.
<table class="table">
<caption>Lista de Usuarios</caption>
<!-- contenido de la tabla -->
</table>Podemos añadir un footer utilizando la etiqueta <tfoot>.
<table class="table">
<thead>
<!-- contenido del thead -->
</thead>
<tbody>
<!-- contenido del tbody -->
</tbody>
<tfoot>
<tr>
<td colspan="3">Footer de la Tabla</td>
</tr>
</tfoot>
</table>Conclusión
Bootstrap 5 ofrece una amplia gama de opciones para manejar y personalizar tablas. Utilizando estas clases, puedes crear tablas atractivas y funcionales de manera eficiente.
