Como crear 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"> 
   <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>";
              echo "<td>".$row['tabla_nombre']."</td>";
              echo "<td>".$row['tabla_telefono']."</td>";
	      echo "<td>".$row['tabla_email']."</td>";
              echo "</tr>";
           }			
        ?>
       </tbody>
   </table>
</div>