Cómo crear tablas con Bootstrap 4
Las tablas son un recurso o elemento HTML muy utilizado para visualizar listas de elementos organizados en filas y columnas.
Se trata de un elemento que está presente desde los orígenes de la creación de páginas webs y son una buena opción para mostrar un grupo de datos clasificados en filas y columnas.
De hecho, antiguamente las páginas webs se desarrollaban con tablas, cosa que, hoy en día, es prácticamente impensable debido principalmente a su enemistad con la adaptabilidad a todos los dispositivos.
Aún así, hay muchos elementos de páginas webs que se desarrollan con tablas y además son muy utilizadas. Por ejemplo, selectores de fechas, calendarios, o simplemente, para mostrar una lista de la compra se puede utilizar las tablas.
Uno de los inconvenientes principales que tienen las tablas es que no son adaptables a todos los dispositivos de forma sencilla.
Con unas cuantas reglas CSS se puede conseguir pero, por suerte, Bootstrap incluye en su framework unas clases CSS que nos van a facilitar mucho la vida cuando deseamos incrustar tablas en una página web. Tu tan solo tienes que dedicarte a usar las clases que te facilite el framework ahorrándote mucho tiempo y esfuerzo.
Es importante saber que para agregar este tipo de tablas a tu página web, debes incluir primero Bootstrap. En el siguiente artículo puedes ver como instalar y usar Boostrap en tus proyectos.
En este artículo vamos a ver como crear tablas con Bootstrap usando distintos diseños o formatos para las tablas en las que vamos a mostrar una lista de coches que tenemos a la venta.
Fíjate en la siguiente tabla:
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Marca</th>
<th scope="col">Modelo</th>
<th scope="col" class="text-center">Año</th>
<th scope="col" class="text-right">Precio</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">1</td>
<td>Nissan</td>
<td>Qasqai</td>
<td class="text-center">2017</td>
<td class="text-right">18.560€</td>
</tr>
<tr>
<td scope="row">2</td>
<td>Seat</td>
<td>Ibiza</td>
<td class="text-center">2005</td>
<td class="text-right">4.500€</td>
</tr>
<tr>
<td scope="row">3</td>
<td>Citroen</td>
<td>Saxo</td>
<td class="text-center">2001</td>
<td class="text-right">1.850€</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4"><strong>Total</strong></td>
<td class="text-right"><strong>24.910€</strong></td>
</tr>
</tfoot>
</table>
</div>El primer <div> o contenedor con class=»table-responsive» es importante agregarlo para que la tabla se muestre de forma aceptable en dispositivos pequeños.
Las tablas pueden tener una cabecera definida con <thead>, un cuerpo, donde suele aparecer el contenido definido con <tbody> y, también pueden tener un <tfoot> para especificar un pie de la tabla. En el caso del ejemplo, lo estamos utilizando para mostrar la suma total de los precios de los coches que tenemos en venta.
La cabecera o <thead> de la tabla suele contener una fila y se emplea para indicar que información se va a mostrar en cada columna.
En el cuerpo o <tbody> de la tabla contiene la información de los coches. En este caso, marca, modelo, año y precio.
Fíjate bien que en el elemento <table> he agregado una class=»table». Esta clase ya está definida por Bootstrap y por defecto mostraría la tabla con el siguiente formato:
Bonito y sin mucho esfuerzo, verdad?
Fácilmente, puedes crear tablas con un color de fondo oscuro. Simplemente, debes agregar en el elemento <table> la clase «table-dark» quedando algo así:
<table class="table table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Marca</th>
<th scope="col">Modelo</th>
<th scope="col" class="text-center">Año</th>
<th scope="col" class="text-right">Precio</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">1</td>
<td>Nissan</td>
<td>Qasqai</td>
<td class="text-center">2017</td>
<td class="text-right">18.560€</td>
</tr>
<tr>
<td scope="row">2</td>
<td>Seat</td>
<td>Ibiza</td>
<td class="text-center">2005</td>
<td class="text-right">4.500€</td>
</tr>
<tr>
<td scope="row">3</td>
<td>Citroen</td>
<td>Saxo</td>
<td class="text-center">2001</td>
<td class="text-right">1.850€</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4"><strong>Total</strong></td>
<td class="text-right"><strong>24.910€</strong></td>
</tr>
</tfoot>
</table>Para tener como resultado:
También sería muy sencillo resaltar la cabecera y pie de de la tabla con un color oscuro de fondo.
<table class="table">
<thead class="table-dark">
<tr>
<th scope="col">#</th>
<th scope="col">Marca</th>
<th scope="col">Modelo</th>
<th scope="col" class="text-center">Año</th>
<th scope="col" class="text-right">Precio</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">1</td>
<td>Nissan</td>
<td>Qasqai</td>
<td class="text-center">2017</td>
<td class="text-right">18.560€</td>
</tr>
<tr>
<td scope="row">2</td>
<td>Seat</td>
<td>Ibiza</td>
<td class="text-center">2005</td>
<td class="text-right">4.500€</td>
</tr>
<tr>
<td scope="row">3</td>
<td>Citroen</td>
<td>Saxo</td>
<td class="text-center">2001</td>
<td class="text-right">1.850€</td>
</tr>
</tbody>
<tfoot class="table-dark">
<tr>
<td colspan="4"><strong>Total</strong></td>
<td class="text-right"><strong>24.910€</strong></td>
</tr>
</tfoot>
</table>Obteniendo como resultado:
Bootstrap también tiene preparada una clase que permite conseguir el efecto zebra con las filas de la tabla. Tan solo, debes agregar en el elemento <table> la clase «table-striped» quedando algo así:
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Marca</th>
<th scope="col">Modelo</th>
<th scope="col" class="text-center">Año</th>
<th scope="col" class="text-right">Precio</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">1</td>
<td>Nissan</td>
<td>Qasqai</td>
<td class="text-center">2017</td>
<td class="text-right">18.560€</td>
</tr>
<tr>
<td scope="row">2</td>
<td>Seat</td>
<td>Ibiza</td>
<td class="text-center">2005</td>
<td class="text-right">4.500€</td>
</tr>
<tr>
<td scope="row">3</td>
<td>Citroen</td>
<td>Saxo</td>
<td class="text-center">2001</td>
<td class="text-right">1.850€</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4"><strong>Total</strong></td>
<td class="text-right"><strong>24.910€</strong></td>
</tr>
</tfoot>
</table>Obteniendo como resultado:
La típica tabla con bordes en celdas y columnas también es posible conseguirlo con Bootstrap fácilmente. Tan solo, debes agregar en el elemento <table> la clase «table-bordered» quedando algo así:
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Marca</th>
<th scope="col">Modelo</th>
<th scope="col" class="text-center">Año</th>
<th scope="col" class="text-right">Precio</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">1</td>
<td>Nissan</td>
<td>Qasqai</td>
<td class="text-center">2017</td>
<td class="text-right">18.560€</td>
</tr>
<tr>
<td scope="row">2</td>
<td>Seat</td>
<td>Ibiza</td>
<td class="text-center">2005</td>
<td class="text-right">4.500€</td>
</tr>
<tr>
<td scope="row">3</td>
<td>Citroen</td>
<td>Saxo</td>
<td class="text-center">2001</td>
<td class="text-right">1.850€</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4"><strong>Total</strong></td>
<td class="text-right"><strong>24.910€</strong></td>
</tr>
</tfoot>
</table>Obteniendo como resultado:
Al estar usando clases definidas en Bootstrap nos podemos dar cuenta en seguida de que es posible combinar estas clases para obtener resultados combinados. Como por ejemplo, una tabla con borde y efecto hover al pasar por encima de cada fila:
<table class="table table-bordered table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Marca</th>
<th scope="col">Modelo</th>
<th scope="col" class="text-center">Año</th>
<th scope="col" class="text-right">Precio</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">1</td>
<td>Nissan</td>
<td>Qasqai</td>
<td class="text-center">2017</td>
<td class="text-right">18.560€</td>
</tr>
<tr>
<td scope="row">2</td>
<td>Seat</td>
<td>Ibiza</td>
<td class="text-center">2005</td>
<td class="text-right">4.500€</td>
</tr>
<tr>
<td scope="row">3</td>
<td>Citroen</td>
<td>Saxo</td>
<td class="text-center">2001</td>
<td class="text-right">1.850€</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4"><strong>Total</strong></td>
<td class="text-right"><strong>24.910€</strong></td>
</tr>
</tfoot>
</table>En algunos casos, quizás te puede interesar crear una tabla pequeña o con menos espaciado en las celdas. Puedes utilizar:
<table class="table table-bordered table-sm">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Marca</th>
<th scope="col">Modelo</th>
<th scope="col" class="text-center">Año</th>
<th scope="col" class="text-right">Precio</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">1</td>
<td>Nissan</td>
<td>Qashqai</td>
<td class="text-center">2017</td>
<td class="text-right">18.560€</td>
</tr>
<tr>
<td scope="row">2</td>
<td>Seat</td>
<td>Ibiza</td>
<td class="text-center">2005</td>
<td class="text-right">4.500€</td>
</tr>
<tr>
<td scope="row">3</td>
<td>Citroen</td>
<td>Saxo</td>
<td class="text-center">2001</td>
<td class="text-right">1.850€</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4"><strong>Total</strong></td>
<td class="text-right"><strong>24.910€</strong></td>
</tr>
</tfoot>
</table>
Obteniendo como resultado:
Fácilmente, puedes resaltar filas o celdas agregando al tr o td la clase «table-primary». Lo puedes ver en el siguiente ejemplo:
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Marca</th>
<th scope="col">Modelo</th>
<th scope="col" class="text-center">Año</th>
<th scope="col" class="text-right">Precio</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">1</td>
<td>Nissan</td>
<td>Qashqai</td>
<td class="text-center table-primary">2017</td>
<td class="text-right">18.560€</td>
</tr>
<tr class="table-primary">
<td scope="row">2</td>
<td>Seat</td>
<td>Ibiza</td>
<td class="text-center">2005</td>
<td class="text-right">4.500€</td>
</tr>
<tr>
<td scope="row">3</td>
<td>Citroen</td>
<td>Saxo</td>
<td class="text-center">2001</td>
<td class="text-right">1.850€</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4"><strong>Total</strong></td>
<td class="text-right"><strong>24.910€</strong></td>
</tr>
</tfoot>
</table>El resultado sería:
Como puedes observar el diseño o aspecto de las tablas con Bootstrap es bastante minimalista, sencillo y bonito. Es mucho mejor que el formato que suelen mostrar los navegadores por defecto.
Bien es cierto que estos efectos se pueden conseguir sin el uso de un framework pero deberás invertir tiempo en las hojas de estilos CSS para conseguirlo.
Necesitas saber más sobre las tablas de Bootstrap. Ver más información en la página oficial.
Autor
Te ha servido? Valora esta entrada!
Comparte en las redes sociales
¿Buscas trabajo de programador?
Muchas gracias. Muy bien explicado,
[…] Tablas […]