Ya les mostre dos formas de formar una tabla dinamica, una forma muy simple, que no es de mayor utilidad mas que explicativa y otra tomando valores desde un archivo de texto.

Pero lo mas dificil de lograr es crear una tabla a partir de una consulta a una base de datos. En lo particular, a mi me gustan los codigos sencillos, donde cualquiera pueda entenderlos. Esto no solo demuestra cierta prolijidad en nuestro trabajo, sino que tambien muestra que sabemos lo que estamos haciendo.

Es por eso que las soluciones que encontre para hacer este tipo de tabla no eran del todo de mi agrado. Entonces me puse a pensar, ¿como puedo lograr simplificar el codigo? y que, al mismo tiempo, sea funcional y quede bien presentado.

La clave fue la parte de bien presentado y se me ocurrio usar hojas de estilo para hacerlo, hey!, son mas poderosas de lo que la mayoria piensa. En un inicio las hojas de estilo me gustaron porque me evitaba el usar tablas para diseñar, lo cual le quita complejidad al codigo.

Entonces y solo entonces, me di cuenta de que si juntaba un poco de PHP con un poco de CSS, podia hacer algo interesante para presentar los resultados de una consulta a la base de datos.

Es cuando llegue a este codigo.

<? /* Coneccion a la base de datos

Si no saben como hacerlo, ya arrancamos mal.

*/

// Hacemos la consulta a la BD
$sql= "SELECT nombre, correo, foto FROM users";
$result=mysql_query($sql);

// Ahora viene el truquito
while($row=mysql_fetch_array($result) {
echo "<div class=’formocelda’>";
echo "<br /><p align=’center’><img src=’../images/$row[foto].jpg’ /></p>";
echo "<br />$row[nombre]</a>";
echo "<br />$row[correo]";
echo "</div>";
}
?>

Eso seria la parte en PHP, la primera parte es donde nos conectamos a la base de datos y luego hacemos la seleccion de las columnas con las que deseamos trabajar, es bastante basico y si no lo saben, les aconsejo que lean eso primero, hay mucha informacion en la red al respecto.

Luego el "truquito"  consiste en un bucle WHILE, que seguira funcionando mientras sigan existiendo valores para mostrar. Luego, dentro del WHILE, simplemente muestro de la forma deseada los datos obtenidos, todos ellos dentro de una clase, que en este caso llame formocelda, que les paso a mostrar a continuacion.

Esta parte que sigue debe incluirse en nuestra hoja de estilos, que obviamente debe ser llamada por la pagina en cuestion. Tambien, para el ejemplo, asumo que la zona donde se mostrara la informacion tiene 600px de ancho y que solo quiero mostrar 3 columnas. Sabiendo eso, nuestra clase dentro del CSS seria algo asi:

.formocelda{
float:left;
width:280px;
margin-top:10px;
height:250px;
}
 

Facil y muy entendible. Simplemente le doy las medidas deseadas a la "celda".

Un poco de teoria, basicamente una celda es un rectangulo formado por una fila y una columna. Por lo tanto, cualquier rectangulo podria ser considerado como una celda, ¿no?

El ancho es de 280 pixeles por un alto de 250 pixeles y le damos un margen superior de 10 pixeles, aunque tambien le podriamos dar un margen a los lados, eso depende de su gusto. Lo importante es el float:left, aqui le decimos al navegador que pegue todo para el lado izquierdo de la zona donde estamos ubicados.

Si queremos 3 columnas, dentro de un espacio de 600 pixeles, sin dar margen a ningun lado, pueden darle un ancho de hasta 290 pixeles a cada "celda" esto es porque Firefox e Internet explorer toman las medidas en pixeles de diferentes formas. Haciendolo asi, se formara de manera correcta la tabla.

Creo que esta facil de entender, las lineas de codigo son bastantes claras y faciles de manejar. Pruebenlo y luego me cuentan que tal les fue con esta sencilla forma de crear una tabla tomando datos de la Base de Datos.

Salu2

Agrega a:

Hide Sites