Cómo crear un estilo de cebra de forma dinámica en PHP

En este tutorial veremos cómo agregar dinámicamente un estilo cebra con PHP a etiquetas HTML como DIV, tablas, listados ordenados o desordenados. Esta simple línea de código nos será de gran ayuda a la hora de estilizar un contenido de un loop.

Si entraste a este artículo buscando crear estilos de cebras dinámicas con CSS3 puedes continuar leyendo en este artículo.

Como usar las pseudo-clases :nth-child, :last-child y :only-child de CSS3

Ir al artículo

INSERTANDO EL CÓDIGO EN EL LOOP

Vamos a crear un ejemplo con listas desordenadas dentro de loop de foreach para que tengan una idea de cómo iría el código.

Como pueden ver en el ejemplo, al contenedor .zebra y a la etiqueta ul debemos dejarlos por fuera del loop ya que si se encontraran dentro, se repetirían junto con li y no es lo que queremos.

Para lograr el efecto de zebra con PHP lo que hicimos fue comprobar con un if si el número de la variable $a que se iba autoincrementando era par o impar. De este modo si la variable $a contiene un número par nos quedará en el html la clase even, si es impar tendremos la clase odd. echo $a++ % 2 ? 'odd' : 'even';

VAMOS A DARLE UN POQUITO DE ESTILO!

Para darle el estilo de cebra solamente nos falta elegir colores diferentes para nuestras clases .odd y .even

Modificado por última vez el día 12 de diciembre de 2012 a las 16:42
Posted in PHP
Scroll to top