Colorea una tabla con PHP
En este tutorial explicaré cómo colorear una tabla con PHP, de modo que cada fila tendrá un color, repitiéndose en los pares y en los impares.
El proceso es sencillo y te permitirá mejorar mucho el aspecto de las tablas que utilices en tus proyectos web, además de hacer más fácil la lectura de los datos.
Objetivo del tutorial: Hacer que el color de fondo de una tabla cambie en cada línea, de forma que las líneas pares tengan un color y las impares otro y hacer este cambio de forma automática con PHP.
El CSS
Debemos añadir el estilo de cada fondo a nuestro CSS. Yo he decidido crear las clases bg1 y bg2, y en cada una usar un color diferente (en la primera un gris claro y en la segunda uno oscuro).
El código CSS que usaré en mi ejemplo es:
.bg1 { background:#E2E2E2; color:#000; }
.bg2 { background:#3B3B3B; color:#FFF; }El PHP: Los datos
Antes de seguir tenemos tenemos que crear dos matrices, que contendrán el valor de cada columna. Podéis usar datos de bases de datos, pero para mi ejemplo usaré dos matrices: nombres y apellidos.
El código de mis matrices es:
$nombres = array('Juan', 'Pepe', 'Jorge', 'Sumolari');
$apellidos = array ('Pérez', 'López', 'García', 'Puntocom');Bien, ahora podemos pasar a la tabla en sí.
El PHP: La tabla
Comenzamos con el código PHP de la tabla. Creamos dos variables: $fila y $filas_totales, que tendrán por valores 0 y el total de filas que tenemos (en mi caso 4), quedando así para mi ejemplo:
$fila = 0;
$filas_totales = 4;Tenemos que mostrar la tabla y una fila que nos explique qué valores mostramos, así que añadimos:
echo '<table><tr class="bg1"><td><strong>Nombre:</strong></td><td><strong>Apellidos</strong></td></tr>';Ahora añadimos un bucle do while, dentro del cual mostraremos los datos.
do {
// EN ESTA LINEA PON EL CODIGO QUE VEREMOS A CONTINUACION
} while ($fila < $filas_totales);
Como podéis ver la condición del bucle es que la variable $fila sea menor que $filas_totales. Por ahora el bucle se repetiría infinitamente, así que añadimos dentro de él:
$fila++;Con esto cada vez que mostremos una fila subirá en contador de filas. Ahora sólo se mostrarán 4 filas.
Aún no mostramos ningún contenido, así que añadimos antes de $fila++; :
echo '<tr class="'.$estilo.'">';
echo '<td>'.$nombres[$fila].'</td><td>'.$apellidos[$fila].'</td>';
echo '</tr>';Con esto mostraremos las filas, pero no tendrán ningún estilo especial. Tenemos que crear una variable ($estilo) que en caso de ser fila par tenga un valor y en caso de ser impar, otro.
¿Cómo distinguimos entre pares e impares?
La verdad es que desconozco la función PHP que haga esto, así que lo que haremos será dividir el número de fila actual entre 2, y comprobar si el resultado es entero (sin decimales). Si es correcto, estamos hablando de fila par, si no lo es, impar.
Así que añadimos después de do { :
$fila2 = $fila / 2;
if (is_int($fila2)) { $estilo = 'bg2'; } else { $estilo = 'bg1'; }Con esto cada fila se mostrará con un color, alternándose.
Por último cerramos la tabla anterior, añadiendo después de } while ($fila < $filas_totales); :
echo '</table>';Por supuesto, en muchas ocasiones no usaremos una matriz, si no datos de una base de datos. En estos casos no hay problema, basta con cambiar $nombres[$fila] por la variable que queramos mostrar.
Resumen de código
El código final debería quedar similar a este:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tabla coloreada</title>
<style type="text/css">
.bg1 { background:#E2E2E2; color:#000; }
.bg2 { background:#3B3B3B; color:#FFF; }
</style>
</head>
<body>
<?php
$nombres = array('Juan', 'Pepe', 'Jorge', 'Sumolari');
$apellidos = array ('Pérez', 'López', 'García', 'Puntocom');
$fila = 0;
$filas_totales = 4;
echo '<table><tr class="bg1"><td><strong>Nombre:</strong></td><td><strong>Apellidos</strong></td></tr>';
do {
$fila2 = $fila / 2;
if (is_int($fila2)) { $estilo = 'bg2'; } else { $estilo = 'bg1'; }
echo '<tr class="'.$estilo.'">';
echo '<td>'.$nombres[$fila].'</td><td>'.$apellidos[$fila].'</td>';
echo '</tr>';
$fila++;
} while ($fila < $filas_totales);
echo '</table>';
?>
</body>
</html>Demo
Como en otros tutoriales, tenéis una demostración online disponible para ver cómo queda al final.
Espero que os haya sido útil el tutorial.
genial muchas gracias, es bueno encontrar sitios donde comparten sus conocimientos, los cuales son de ayuda para otras personas :)