El diseño web se transforma al paso de la evolución de la tecnología y de las demandas de los internautas que, cada vez más, dependen de los medios digitales para realizar actividades cotidianas como trámites personales, aprender nuevas habilidades, consultar recetas o comprar diversos productos. De esta manera, esta disciplina ofrece, en la actualidad, una enorme variedad de recursos que buscan simplificar o mejorar la forma de navegar por Internet.
En este artículo, te explicaremos cómo puedes crear una tabla en Bootstrap. Este tipo de elemento visual y de organización puede marcar la diferencia entre tu negocio y la competencia, pues tus clientes podrán encontrar, en tu página web, un medio les entregue de manera sencilla, atractiva o reconfortante, lo que buscan. Si te interesa comenzar este cambio y transformar tu presencia en línea, continua leyendo.
Qué es una tabla en el diseño web
Una tabla es, en el desarrollo web, una estructura de datos que organiza la información en filas y columnas. Este elemento, por lo general, se utiliza para estructurar y disponer, de manera legible, contenido relevante o establecer correspondencias.
Cada fila de la tabla representa un conjunto de datos relacionados, mientras que sus columnas, categorías o atributos. La intersección de una fila y una columna se llama celda y esta contiene un valor específico.
En el diseño web, las tablas suelen componerse por elementos HTML <table>, los cuales contienen etiquetas de encabezado <thead> para las filas de encabezado; de cuerpo <tbody> para las filas de datos y de pie <tfoot> para las filas de pie (solo si son necesarias). El siguiente ejemplo muestra cómo luce el código de una tabla:
<table>
<thead>
<tr>
<th>Nombre</th>
<th>Edad</th>
<th>País</th>
</tr>
</thead>
<tbody>
<tr>
<td>Juan</td>
<td>25</td>
<td>España</td>
</tr>
<tr>
<td>María</td>
<td>30</td>
<td>México</td>
</tr>
</tbody>
</table>
Las tablas pueden servir para mostrar presentar listas de productos, resultados de encuestas, registros de usuarios, entre otros. Es importante que se uses este recurso con moderación y que consideres alternativas de diseño para presentar información compleja o extensa. A continuación, te decimos cómo puedes crear una tabla para tu sitio web con Bootstrap.
Cómo crear una tabla en Bootstrap
- Importa las dependencias de Bootstrap.
- Crea la estructura básica de la tabla.
- Personaliza la tabla con los estilos predefinidos de Bootstrap.
1. Importa las dependencias de Bootstrap
Para empezar, es necesario que importes las dependencias de Bootstrap, ya sea desde una CDN o los archivos CSS y JavaScript alojados localmente. Coloca estos archivos en el encabezado del documento HTML de tu sitio, como en la siguiente muestra:
<head>
<link rel="stylesheet" href="ruta/a/bootstrap.min.css">
<script src="ruta/a/bootstrap.min.js"></script>
</head>
2. Crea la estructura básica de la tabla
Luego, crea la estructura básica de la tabla con elementos HTML como <table>, <thead>, <tbody>, <tr> y <td>. Añade los encabezados de columna con la etiqueta <th> dentro de <thead> y después, inserta las filas y celdas correspondientes dentro de <tbody>. Tu código lucirá de manera parecida a este:
<table class="table">
<thead>
<tr>
<th>Nombre</th>
<th>Edad</th>
<th>País</th>
</tr>
</thead>
<tbody>
<tr>
<td>Juan</td>
<td>25</td>
<td>España</td>
</tr>
<tr>
<td>María</td>
<td>30</td>
<td>México</td>
</tr>
</tbody>
</table>
3. Personaliza la tabla con los estilos predefinidos de Bootstrap
Por último, aplica los estilos predefinidos de Bootstrap, con las opciones que te proporciona este framework. Por ejemplo, puedes agregar la clase table a la etiqueta <table> para aplicar formas básicas de tabla. También, con otras plantillas, como table-striped, puedes modificar el fondo de las filas o, con table-bordered, añadir bordes a tu tabla:
<table class="table table-striped table-bordered">
<!-- contenido de la tabla -->
</table>
Cómo darle forma a una tabla en Bootstrap
Si deseas cambiar más la apariencia de la tabla, puedes emplear clases CSS personalizadas o las plantillas de Bootstrap para modificar colores, tamaños de fuente, márgenes, etc.
Bootstrap ofrece una variedad de clases predefinidas con las que puedes transformar el aspecto y estilo de tus tablas. Algunas de ellas son:
- Clase «table». Se emplea para otorgarle estilos básicos a una tabla. Para aplicarla a tus creaciones, agrega la clase «table» a la etiqueta <table> y obtendrás una estructura básica de tabla:
<table class="table">
<!-- contenido de la tabla -->
</table>
- Clase «table-striped». Se usa para añadir filas con fondo alternativo a la tabla. Este recurso facilita la lectura de los datos. Añade la clase «table-striped» a la etiqueta <table>:
<table class="table table-striped">
<!-- contenido de la tabla -->
</table>
- Clase «table-bordered». Con este recurso, puedes agregar bordes a la tabla y a las celdas. Es ideal para marcar visualmente la distinción entre filas y columnas. Incorpora la clase «table-bordered» a la etiqueta <table>:
<table class="table table-bordered">
<!-- contenido de la tabla -->
</table>
- Clase «table-hover». Se utiliza para resaltar las filas al momento de pasar el cursor sobre ellas, lo que le brinda interactividad a la tabla. Para incorporar este estilo a tu sitio, escribe el siguiente código:
<table class="table table-hover">
<!-- contenido de la tabla -->
</table>
- Clase «table-responsive». Si necesitas que la tabla se ajuste correctamente a los dispositivos móviles u otros tamaños de pantalla más pequeños, puedes usar la plantilla «table-responsive». Envuelve la tabla con un contenedor div y agrega «table-responsive» a ese div.
<div class="table-responsive">
<table class="table">
<!-- contenido de la tabla -->
</table>
</div>
Cómo crear una tabla con scroll
- Para crear una tabla con desplazamiento vertical en Bootstrap, puedes emplear la clase «table-responsive» junto con el estilo CSS «overflow-y: scroll». Esto permitirá que la tabla tenga un área de movimiento vertical cuando el contenido exceda la altura del contenedor:
<div class="table-responsive" style="height: 300px; overflow-y: scroll;">
<table class="table">
<!-- contenido de la tabla -->
</table>
</div>
En este ejemplo, se agregó un contenedor <div> con la clase «table-responsive» y, también, se aplicó el estilo «height: 300px» para establecer la altura máxima del contenedor. El estilo «overflow-y: scroll» permite que la tabla tenga un desplazamiento vertical cuando el contenido exceda el área visible.
Puedes ajustar la altura y el estilo de desbordamiento según tus necesidades. Utilizar valores específicos para la altura o porcentajes te ayudará a adaptar la tabla al diseño de tu sitio.
Recuerda que, además de aplicar la clase «table-responsive» y el estilo de desbordamiento, puedes implementar otras clases de Bootstrap para darle un efecto adicional a la tabla, como «table-striped», «table-bordered», entre otras.
Con una tabla scroll, puedes conseguir que este elemento se desplace, de manera vertical, cuando el contenido sea más extenso, lo que facilitará la lectura y navegación, en caso de que contenga muchos datos.
Cómo crear una tabla con buscador
-
En el HTML, fija la estructura básica de la tabla y el campo de búsqueda:
<div class="container">
<input type="text" id="searchInput" class="form-control" placeholder="Buscar...">
<table id="dataTable" class="table">
<!-- Contenido de la tabla -->
</table>
</div>
2. Agrega el código JavaScript para filtrar los elementos de la tabla:
<script>
// Se obtiene una referencia al campo de entrada de búsqueda
const searchInput = document.getElementById('searchInput');
// Se obtiene una referencia a la tabla y a las filas de datos
const dataTable = document.getElementById('dataTable');
const dataRows = dataTable.getElementsByTagName('tr');
// Se agrega un evento de escucha al campo de entrada de búsqueda
searchInput.addEventListener('input', function() {
const searchText = searchInput.value.toLowerCase();
// Se itera sobre las filas de datos y se muestra u oculta cada fila según el texto de búsqueda
for (let i = 0; i < dataRows.length; i++) {
const rowData = dataRows[i].innerText.toLowerCase();
if (rowData.includes(searchText)) {
dataRows[i].style.display = '';
} else {
dataRows[i].style.display = 'none';
}
}
});
</script>
En esta muestra, se empleó JavaScript para detectar cambios en el campo de entrada de búsqueda. Cuando se produzca una modificación, se obtendrá el valor del campo de entrada y se comparará con el contenido de cada fila de la tabla. Si una fila contiene el texto de búsqueda, se mostrará. De lo contrario, se ocultará.
Es importante que reemplaces «dataTable» y «searchInput» de este ejemplo con los IDs de los elementos HTML que correspondan en tu caso.
Ventajas y desventajas de una tabla hecha con Bootstrap
Ventajas
-
Facilidad de implementación. Bootstrap proporciona clases y estilos predefinidos para tablas, lo que facilita la creación y personalización de este recurso y, por tanto, evita que escribas mucho código CSS adicional.
-
Diseño responsivo. Las tablas de este framework están diseñadas para adaptarse a diferentes tamaños de pantalla y aparatos. Esto las hace responsivas y, por consiguiente, garantiza que se desplieguen bien en dispositivos móviles.
-
Componentes y estilos consistentes. Al utilizar Bootstrap, todas las tablas de tu sitio web tendrán una apariencia y un comportamiento consistente. Gracias a ello, se mantendrá una consistencia visual y proporcionarás una experiencia de usuario uniforme a tus clientes.
-
Funcionalidades adicionales. Bootstrap ofrece componentes que permiten agregar características adicionales a las tablas, como filtrado, paginación, ordenamiento de columnas, resaltado de filas, entre otros. Con estos recursos, podrás darle una mayor flexibilidad y funcionalidad a tus tablas.
Desventajas
-
Limitaciones de personalización. Es posible que algunas funciones más específicas o avanzadas requieran escribir un CSS personalizado adicional.
-
Código adicional. Si solo necesitas una tabla simple sin características adicionales, Bootstrap puede implicar una carga de código adicional innecesaria, pues debes incluir los archivos CSS y JavaScript de este framework en tu sitio web de manera obligatoria para acceder a sus funciones.
-
Curva de aprendizaje. Si no estás familiarizado con Bootstrap, puede llevarte un tiempo aprender y comprender las clases, así como la terminología asociada a esta plataforma.
Bootstrap ofrece un conjunto de herramientas y clases que simplifican la creación de tablas responsivas y funcionales. Al combinar las clases de tabla predefinidas, como «table» y «table-striped», con recursos, como un campo de búsqueda o la clase «table-responsive», obtendrás diseños personalizados de tablas con estilos atractivos y capacidades de filtrado, lo que mejorará, de forma definitiva, la experiencia del usuario al interactuar con el contenido de tu página.
Prueba implementar esta herramienta de diseño web y comienza a impulsar tu negocio mediante una presencia digital enfocada en la satisfacción de tus clientes.
