Alternar el color de las filas de una tabla

[roboty]

tengo una capa div como esta:

Código HTML:

<div>
<table style="background-color: rgb(133, 133, 133);">
<tr>
   <td>documentos</td>nombres<td></td>
</tr>
</table>
</div>
 

en esta capa muestro en pantalla todos los registros de mi base de datos el color de fonfo siempre es el mismo y lo que quiero es que sea uno del color este y otro sin en blanco osea estilo cebra.

he estado buscando por google pero no consigo realizarlo correctamente como tendria que hacerlo?podria hacerlo sin hoja de estilos directamente en el atributo table?

alguna ayuda porfavor

[cristian_cena]

yo lo hago de esta forma http://jsfiddle.net/cristian_cena/ZjkMz/ para mantener el html limpio.

[roboty]

hola cristian_cena gracias por contestar estoy muy verde con css y jquery no acabo de entender bien tu codigo no me podrias decir como tengo que hacerlo con la capa div que postee encima ya que yo quiero algo mas sencillo osea la primera capa de un color y la segunda sin color alguna ayuda

[cristian_cena]

hola, roboty. En nada va a influir que uses o no la capa div que nombras, así que usala tranquilo o eliminala, da igual. ya que el script trabaja sobre el id que le das a la tabla. A mi me gusta mucho esta forma de hacerlo porque no ensuciamos el html.

Lo que hace el script es añadir o quitar clases según el evento que se produzca sea "mouseover" o "mouseout", nada más das los backgrounds que quieras a esas clases (en el ejemplo .grey y .blue). Reemplaza #zebra por el id que le des a tu tabla y no te olvides de linkear jquery al documento. y listo.

Al codigo lo tomé de aca: http://www.simcomedia.com/css-and-jquery-zebra-stripes

Si jquery te resulta complicado y te sientes mejor con php puedes generarle clases a las filas de la tabla cuando haces el listado/consulta de registros (while, foreach,etc.). A todos los registros pares le das una clase llamada "par" y a los impares otra llamada "impar"

Acá un usuario comparte una función para hacerte con los numeros pares: http://www.forosdelweb.com/f18/funci...09/#post280460

y luego con css

Código CSS:

.par{background: ... ;}
.impar{background: ... ;}
 

saludos.

[orlandopc09]

También podrías utilizar CSS 3 para lograr lo mismo, aunque esto tiene como inconveniente que solo los navegadores mas modernos lo interpretan.

Código CSS:

<style type="text/css">
    tr:nth-child(even) {
        background: #336699;
    }
    tr:nth-child(odd){
        background: #ff0000;
    }
</style>
 

Salu2 y espero que te sirva