Tabla responsiva Bootstrap para lista de datos. En los últimos años las tablas HTML perdieron presencia en el desarrollo de páginas web. Sin embargo, en su lugar se utilizan DIV y/o etiquetas HTML5.
En el mundo de las aplicaciones web son muy utilizado para mostrar datos de MySQL. Por lo tanto, la tabla HTML todavía está vigente y se utiliza para mostrar datos en filas y columnas.
Ahora, para que una tabla tenga una buena interfaz de usuario es recomendable utilizar Bootstrap para que sea responsiva (Adaptable en diferentes resoluciones de pantalla), Con esta librería gratuita usted puede crear fácilmente un diseño de tabla responsiva en minutos. Sin embargo para que se aplique solo basta añadir una clase al inicio de la tabla.
<table class="table table-responsive">
Los recursos a utilizar son librerías que debemos agregar en la cabecera de nuestro archivo HTML. En este artículo, le veremos cómo crear una tabla adaptable con bootstrap.
Tabla responsiva Bootstrap para lista de datos
Le mostraremos unos modelos para aplicar estos estilos. La librería bootstrap y jQuery deben agregarse obligatoriamente para utilizar el Framework bootstrap.
Ejemplo de aplicación de este Framework
<!DOCTYPE html> <html> <head> <title>Tabla Bootstrap responsiva para lista de datos</title> <!-- Declaración de las librerias externas --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body>
Tabla responsiva bootstrap básica
Utilice la clase Table para agregar el estilo básico a la tabla HTML. La clase «tabla-responsive» hace la tabla responsiva.
Mostrando el código completo con sus respectivas.
<!DOCTYPE html>
<html>
<head>
<title>Tabla Bootstrap responsiva para lista de datos</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Bootstrap Responsiva Tabla (Basic)</h2>
<!-- Inicio de tabla responsive-->
<table class="table table-responsive">
<thead>
<tr>
<th>Nombres</th>
<th>Apellidos</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Juan Carlos</td>
<td>Flores</td>
<td>JuanCarlos@midominio.com</td>
</tr>
<tr>
<td>Juan</td>
<td>Jorge</td>
<td>Juan@midominio.com</td>
</tr>
<tr>
<td>Maria</td>
<td>Carlos</td>
<td>Maria@midominio.com</td>
</tr>
</tbody>
</table>
<h2>Bootstrap Responsive Tabla (Striped)</h2>
<table class="table table-striped table-responsive">
<thead>
<tr>
<th>Nombres</th>
<th>Apellidos</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Juan Carlos</td>
<td>Flores</td>
<td>JuanCarlos@midominio.com</td>
</tr>
<tr>
<td>Juan</td>
<td>Jorge</td>
<td>Juan@midominio.com</td>
</tr>
<tr>
<td>Maria</td>
<td>Carlos</td>
<td>Maria@midominio.com</td>
</tr>
</tbody>
</table>
<h2>Bootstrap Responsiva Tabla (Hover)</h2>
<table class="table table-hover table-responsive">
<thead>
<tr>
<th>Nombres</th>
<th>Apellidos</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Juan Carlos</td>
<td>Flores</td>
<td>JuanCarlos@midominio.com</td>
</tr>
<tr>
<td>Juan</td>
<td>Jorge</td>
<td>Juan@midominio.com</td>
</tr>
<tr>
<td>Maria</td>
<td>Carlos</td>
<td>Maria@midominio.com</td>
</tr>
</tbody>
</table>
<h2>Bootstrap Responsiva Tabla (Bordered)</h2>
<table class="table table-bordered table-responsive">
<thead>
<tr>
<th>Nombres</th>
<th>Apellidos</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Juan Carlos</td>
<td>Flores</td>
<td>JuanCarlos@midominio.com</td>
</tr>
<tr>
<td>Juan</td>
<td>Jorge</td>
<td>Juan@midominio.com</td>
</tr>
<tr>
<td>Maria</td>
<td>Carlos</td>
<td>Maria@midominio.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>Espero que esta corta explicación les sirva en abundancia y no se olviden cualquier duda que tengan no duden en consultar en los comentarios.
Descargar código fuente:
