Cebreado con PHP o jQuery
Los cebreados son usados en diseño web para realizar listados en donde cada una línea se aplica un estilo diferente. El término proviene del animal Cebra, claramente por su piel.
Éste tipo de detalle no solo condimenta al diseño sino además le proporciona una característica muy importante, la legibilidad. A la hora de tabular datos a veces nos encontramos con listas muy largas en donde paginamos cada 25 o 50 registros, al igual que las líneas punteadas que encontramos en los índices de los libros, intercalar un estilo en un listado nos facilita la lectura y evita que nos perdamos de línea.
Hay diferentes manera de realizar un cebreado, en este tutorial vamos a aprender como hacerlo con el lenguaje PHP y también con jQuery.
Nuestra hoja de estilos
No vamos a profundizar en este aspecto, si quieren ver los estilos pueden descargar el ejemplo. Solamente quiero hacer hincapié en que vamos a tener que definir una clase llamada “alt”, la cual en nuestro caso será aplicada a un <tr> de una tabla.
Entonces, y a modo de ejemplo, el color de fondo de la tabla o del <tr> será por defecto #FFF, y cuando le apliquemos la clase “alt” al <tr> será #CCC.
Cebreado con PHP
Para el cebreado vamos a necesitar primero crear la función que se encargue de devolvernos la clase “alt” cada un registro.
Creando la función
<?php //Funcion para el cebreado cada 1 registro. function alt ($cebra) { if ($cebra/2 == floor($cebra/2)) { return ' class="alt"'; } else { return ''; } } $cebra=1; ?>
La clave está en lo que evaluamos en el if, decimos:
“Si $cebra dividido 2 es igual al valor entero inferior más cercano al resultado de $cebra dividido 2, entonces imprimí la clase alt, sino no.”
Para comprender mejor esto pueden leer más de la función floor.
Terminada la función, le atribuimos valor 1 a la variable $cebra.
Devolviendo los datos
<table>
<thead>
<tr>
<th>ID</th>
<th>Nombre</th>
<th>Comentario</th>
</tr>
</thead>
<tbody>
<?php for( $i=1; $i<=6; $i++ ) { ?>
<tr<?php echo alt($zebra); $zebra++; ?>>
<td><?php echo $i; ?></td>
<td><p>Juan Perez</p></td>
<td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus imperdiet vestibulum volutpat.</p></td>
</tr>
<?php } ?>
</tbody>
</table>Una vez que tenemos la función vamos a ejecutarla, para eso primero tenemos que crear un bucle que genere registros.
En este caso creé un for() que nos devolverá 6 <tr>, en cada uno se imprimirá el class="alt" o no dependiendo si es par o impar. Para esto en el <tr> hacemos un echo del resultado de la función y luego le sumamos 1 para que dentro del bucle for() $cebra vaya cambiando:
<tr<?php echo alt($zebra); $zebra++; ?>>
Cebreado con jQuery
En este caso usaremos menos código. Antes de cerrar la etiqueta <head> ponemos:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ /* Cebreado con jQuery */ $("#cebreado-jquery tbody tr:even").addClass("alt"); }); </script>
Lo que estamos diciendo acá es lo siguiente:
“A los
<tr>pares que esten dentro de<tbody>de la tabla con el id cebreado-jquery agregarle la clase alt”
Recuerden que pueden usar :even para los registros pares y :odd para los impares.
En la estructura html hacemos un for() en php igual que en el caso anterior, solo que esta vez no vamos a tener que imprimir el resultado de la función. En este caso recuerden agregarle a la tabla el id “cebreado-jquery”.
Conclusión
Si bien es apenas más trabajoso, recomiendo hacer el cebreado en PHP. Este lenguaje, a diferencia de javascript que puede ser desactivado, funcionara siempre del lado del usuario.
Free WordPress Theme: Sábados Blancos 
Seleccionar múltiples checkbox a la vez con jQuery 
Crear un menú estilo acordeón con jQuery
5 Comentarios »
NazarenoL
28.02.10, 1:33 am
Te comento una mejor forma de revisar si el numero es par en php…
No testié rendimiento, no se si habrá grandes diferencias, pero si es mas prolijo..
(El operador % calcula el resto de la division)
Germán Ferrari
01.03.10, 12:14 pm
Nazareno, el código que escribiste no salió. Si puedes prueba enviar tu comentario nuevamente escribiendo el código entre las etiquetas < code > < /code >
Sino puedes mandarmelo por el form de contacto que con gusto lo agregaré.
Saludos y gracias por el aporte!
Alan
31.03.10, 3:26 am
Hola Germán.
A lo que se refiere NazarenoL es que % es el residuo de la división. Si un número es dividido entre dos y el residuo es cero, es par.
Por ejemplo:
Espero que eso ayude. Por cierto, felicidades por tu blog, es bastante bueno y tienes un estilo refinado para el diseño. Enhorabuena.
Germán Ferrari
04.04.10, 3:48 pm
Gracias Alan, lo voy a tener en cuenta para la próxima vez que tenga que hacer un cebreado :)
Saludos!
dhamaso
27.05.10, 4:02 am
gracias por compartir sus conocimientos, que por cierto están muy bien explicados XD para los que apenas empezamos en esto, nos es de gran ayuda un saludo desde México.