Listas de elementos con colores alternos en PHP

  • Por
Mostramos la manera de crear una tabla para mostrar elementos en filas cuyo color de fondo se vaya alternando entre dos colores distintos.
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

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Aure

14/7/2004
mmm... Yo opino que usando esta otra forma es más sencillo colorear las filas... siempre y cuando solosean por pares:

//bucle para mostrar los resultados
while ($damefila=mysql_fetch_object($resultid)){
$bgcolor = ($bgcolor == "#dddddd") ? "#ddddff" : "#dddddd";
echo "<tr bgcolor='".$bgcolor."'>";
?>

Neokhazer

08/12/2004
Una versión un tanto mejorada del archivo que, además, le da colores aleatorios a los campos. Hace falta saber algo de las variables variable, pero hay un muy buen artículo acerda de ellas en esta web ;)
Algunos pensaran que es muy simple, pero en fin, aquí esta:
<?
function colorandom(){
$aux=rand(1,3);
setType($aux,integer);
$color="colorcillo$aux";
return $color;
}

$link=mysql_connect("localhost","root","");
mysql_select_db("ejemplo",$link);

$sql="SELECT * FROM librovisitas_php ORDER BY id_librovisitas_php LIMIT 10";
$consulta=mysql_db_query("ejemplo",$sql,$link);
echo "<table align='center'>";
echo "<tr bgcolor='000000'>";
echo "<td><font color='FFFFFF'><b><center>Nombre</center></b></font></td>";
echo "<td><font color='FFFFFF'><b><center>Email</center></b></font></td>";
echo "<td><font color='FFFFFF'><b><center>Valoración</center></b></font></td>";
echo "</tr>";
$numfila=2;
while($row=mysql_fetch_array($consulta)){
echo "<tr ";
if($numfila%2==0){
echo "bgcolor=#000033";
$colorcillo1="DDDDFF";
$colorcillo2="DDDDCC";
$colorcillo3="DDDDAA";
}else{
echo "bgcolor=#000099";
$colorcillo1="DDFFFF";
$colorcillo2="DDCCCC";
$colorcillo3="DDAAAA";
}
echo ">";
$aux=colorandom();
echo "<td><font color='".$$aux."'>".$row['nombre']."</font></td>";
$aux=colorandom();
echo "<td><font color='".$$aux."'>".$row['email']."</font></td>";
$aux=colorandom();
echo "<td><font color='".$$aux."'>".$row['valoracion']."</font></td>";
echo "</tr>";
$numfila++;
}
echo "</table>";
?>

Un poco largo, no? bueno, ahi queda. Si a los admins les parece demasiado largo como para ponerlo no duden en borrarlo, en fin, no sere yo quien tenga que decir que deben de hacer.

Luis Hernando Aguilar

20/5/2005
Saludos. Me ha parecido util su artìculo pero quiero colaborar con una funciòn que desarrollè para hacer esto mismo de forma màs fàcil aùn, sobretodo porque simplemente necesitarìamos al momento de la iteraciòn llmara a dicha funciòn.

la funciòn es:

function bgcolor ( $bgcolor )
{
//itera entre un color oscuro y uno clarito
if (!$bgcolor)
$bgcolor ='#ffffff';

if ($bgcolor =='#efefef')
{
$bgcolor ='#ffffff';
}
elseif ($bgcolor =='#ffffff')
{
$bgcolor ='#efefef';
}
return $bgcolor;
}

En este caso la iteraciòn se hace entre los colores blanco y efefef.
Al momento de hacer el llamado solamente hacemos

bgcolor= bgcolor ( $bgcolor );

echo '<tr bgcolor='.$bgcolor.'><td>..</td></tr>';

Tambièn se puede modificar para que en vez de enviar un valor de color, envie unnombre de una clase CSS (esto ultimo es lo que hago y me parece mas limpio y funcional)

Espero esta opciòn les sea util y quedo a la espera de comentarios.
Exitos.
Luis

Luis Hernando Aguilar Ramìrez

20/5/2005
OJO HAY UN ERROR EN:
http://www.desarrolloweb.com/articulos/ejemplos/tallerphp/colores_alternos.php

Warning: mysql_connect(): Access denied for user: 'desarrollowebcom@localhost' (Using password: YES) in /home/chs/desarrolloweb.com/home/html/articulos/ejemplos/tallerphp/colores_alternos.php on line 12 ...

desvelado

13/10/2005
hasta que supe para que servía el famoso % operador !

Gracias muy ilustrativo !

rafaux

23/12/2005
Excelente espero poder aprender más con este tipo de páginas, dado que voy enpezando con php.
Gracias a todos los que colaboran en esto.

jesus

17/11/2016
Rifaaaaadooo!!!
Gracias el código sintetizado de abajo fue mejor pero gran a porte me salvaron de un proyecto :D