Easiest way to building zebra tables in css

I found myself stuck with a real strange but interesting thing. I just needed to get the design as in the picture below. If it were only for html page, it would have been indeed a child’s play. But the problem was that it had to be fetched dynamically.
Picture1 :

I tried the best way to learn. Googled it. I tried in forums as well, but the solution came in the form of javascript codes which I am really afraid of. I infact avoid using javascript, for I am not at all comfortable with the codes. Thereafter, there was the css property to my rescue. Its the nth child pseudo class expression property.
The codes go as:

tr:nth-child(2n+1) /* represents every odd row of a html table */
tr:nth-child(odd) /* same */
tr:nth-child(2n) /* represents every even row of a html table */
tr:nth-child(even) /* same */

/* Alternate paragraph colours in CSS */
p:nth-child(4n+1) { color: navy; }
p:nth-child(4n+2) { color: green; }
p:nth-child(4n+3) { color: maroon; }
p:nth-child(4n+4) { color: purple; }

But the issue was that, this cannot work in IE. A big issue for me.
So at last, I tried php and succeeded.
Here is the code that will get the thing done easily and without any javascript jargon.


2 responses to this post.

  1. what about this second sentence?


    • if by second sentence you mean the colorful text beginning with which in fact is an image, this is the full set of codes that I had been using for the implementation of the above concept …. so this is the implementation part … lemme know if this is what you were referring to …waiting for ur reply on this ..


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: