Tablas dinámicas con MySQL, PHP y estilos Bootstrap

Vamos a ver como generar una tabla dinámica a partir de la lectura de contenido de una tabla de nuestra base de datos MySQL.

Antes de nada vamos a ver el resultado final:

Para ello vamos a dividir el código en varios puntos (vamos a trabajar sobre un único archivo llamado TablaDinamica.php).

1- Cargamos librería Bootstrap

 	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

2- Realizar la consulta sobre nuestra tabla

NOTA: Previamente debemos estar conectados a nuestra base de datos para realizar la consulta.

Usamos * para obtener todos los campos, pero también se pueden obtener los campos individualmente porque en muchas ocasiones no es necesario obtener todos los campos si algunos no se van a usar.

Vamos a realizar una consulta a la tabla usuarios y vamos a guardar el resultado en la variable $consultaUsuarios (la consulta nos devuelve los datos en forma de array).

<!--?php
    $consultaUsuarios = mysql_query("SELECT * FROM usuarios");
?-->

3- Generamos la tabla dinámica

Clases de Bootstrap que podemos usar en nuestra tabla:

• table-responsive : aparece un scroll horizontal en la tabla en dispositivos pequeños.
• table : estilos básicos
• table-striped : dependiendo si es fila par o impar cambia de color.
• table-bordered : aplica borde sobre la tabla.
• table-hover : cambia de color la fila de la tabla al pasar el ratón por encima.
• table-condensed : Hace más compacta la tabla eliminando espacios.

Vamos a usar las siguientes clases de Bootstrap para nuestra tabla: table-responsive, table, table-bordered, y table-striped, por lo tanto vamos a comprobar que nuestra tabla tendrá borde y las filas pares tendrán un color siempre diferente a las filas impares.

<div class="table-responsive"> 
   ";
              echo "";
              echo "";
	      echo "";
              echo "";
           }			
        ?&gt;
 
<table class="table table-bordered table-striped">
 
<thead> 
 
<tr>
              <!-- definimos cabeceras de la tabla --> 
 
<th>Nombre</th>
 
 
<th>Teléfono</th>
 
 
<th>Email</th>
 
</tr>
 
</thead>
 
 
<tbody>
	<!--?php
           //recorremos resultado de la consulta y añadimos el contenido a la tabla
	   while($row= mysql_fetch_array($consultaUsuarios)) 
	   {
              echo "<tr-->
<tr>
<td>".$row['tabla_nombre']."</td>
<td>".$row['tabla_telefono']."</td>
<td>".$row['tabla_email']."</td>
</tr>
</tbody>
 
</table>
 
</div>