Listas de elementos con colores alternos en PHP

19/7/03 - Vamos a ver como crear una lista de elementos en una tabla creada por filas con colores alternos. Es decir, vamos a mostrar una lista de elementos mostrados en un conjunto de filas que pueden tener uno de dos colores y que se van alternado, primero uno y luego el otro. Para entender mejor el ejercicio sería interesante ver el efecto buscado en una página aparte.

Esta disposición en filas de distintos colores puede dar un aspecto un poco más completo a nuestro diseño y servir de guía visual para que la tabla se entienda con un golpe de vista y se conozca mejor cuales son los datos que pertenecen a cada fila.

Para conseguir los colores alternos vamos a utilizar una variable que llevará la cuenta del número de filas y si la fila es impar mostrar un color distinto que el de la fila par. Para deducir si una fila es par o impar podemos dividir el número de fila entre 2 y si el resto de esa división es igual a cero, es que el número es par y si es distinto de cero, entonces el número es impar.

El operador %

Para obtener el resto de una división utilizamos el operador %, llamado operador de módulo. Insistimos: % devuelve el resto de una división entre los dos valores que se apliquen a la operación. Por ejemplo 2 % 2 valdrá 0, y la operación 6 % 5 dará 1.

Bucle con filas de colores alternos

Veamos ahora el código de un bucle en el que se utilicen filas con colores alternos. Utilizaremos la tabla del ejercicio del libro de visitas, relatado en un Manual práctico de DesarrolloWeb.com.

El recorrido será parecido a otros que hemos realizado por los elementos del resultado de una consulta SQL contra una base de datos. La única tarea a realizar que no hayamos visto con anterioridad en los artículos de PHP publicados en este sitio, consiste en que se lleva una cuenta del número de filas y por cada fila se comprueba si el módulo del número de fila y el número 2 es cero o no. Si es cero se colocará un color y si no vale cero se colocará otro color, con lo que se creará esa alternancia.

El código es el siguiente.

<?
//creo la sentencia sql para atacar a la base de datos.
$ssql = "SELECT * FROM librovisitas_php";
$ssql .= " ORDER BY id_librovisitas_php limit 10";

//ejecuto la sentencia para extraer un conjunto de resultados
$resultid = mysql_query($ssql,$conn);

//coloco la cabecera de la tabla
?>
<table width=500 align=center>
<tr bgcolor="bbbbbb" align=center>
    <td><b>Nombre</b></td>
    <td><b>Email</b></td>
    <td><b>Valoracion</b></td>
</tr>
<?
//creo e inicializo la variable para contar el número de filas
$num_fila = 0;

//bucle para mostrar los resultados
while ($damefila=mysql_fetch_object($resultid)){
    echo "<tr ";
    if ($num_fila%2==0)
       echo "bgcolor=#dddddd"; //si el resto de la división es 0 pongo un color
    else
       echo "bgcolor=#ddddff"; //si el resto de la división NO es 0 pongo otro color
    echo ">";
?>
       <td><?echo $damefila->nombre;?></td>
       <td><?echo $damefila->email;?></td>
       <td><?echo $damefila->valoracion;?></td>
    </tr>
<?
    //aumentamos en uno el número de filas
    $num_fila++;
} //cierro el while
?>
</table>

Se puede ver el resultado de ejecutar este script en una página aparte.

Autoría, licencia y acciones sobre este artículo

Informe de Miguel Angel Alvarez* Director de DesarrolloWeb.com URL: http://www.desarrolloweb.com Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright. * Para consultas técnicas utilizar la lista de correo. Versión imprimible del artículo Enviar artículo por e-mail Publicar un comentario del artículo

Comentarios sin revisar

Añadir un comentario del artículo Entre los comentarios no revisados puede haber algunos interesantes que se hayan enviado recientemente.

 Se han encontrado 6 comentarios sin revisar

Ver los comentarios no revisados

Añadir un comentario del artículo

Enlaces:

Maestrosdelweb

  Ir arriba