Web Design Tips #2: Alternate Row Colors in Resultset!!!!

Web Design Tips #2: Alternate Row Colors

In my recent post of Web design tip, I have shown how to use Yellow Fade Technique. If you have missed it. Read it Here.

Okay, What is alternate row coloring?

Imagine you have a set of records in database, you fetched them and just “echoed” them as a bulk in form of table. How appealing right?

So we solve this problem. I know, I understand not everyone just echo’s the result directly. But then, how you show is, what your user sees!!!

Now, imagine this, we fetch the rows from database and then while placing them, we modify them in a way it looks more clear, decent and ofcourse appealing as well.

How do we do it then?

Simple. let us suppose we have got 17 rows as result of some fetch operation. Now using a while loop{for can also work}, use n/2 formula and get the even and odd results.

For every even result set we use a specific color, and for odd result set we use different color. This helps in making it in a readable and appealing form.

Wasnt it simple? Most of us, programmers make this mistake of choosing wrong colors for display { red/blue, yaak }, which is often called as Programmers Design!!!! No wonder why they call it 😀

Accept the fact that design is not programmers cup of taste!!!!

Anyways, I am working on some script for my project, so soon I will post the result and code of this as well.

If you know/happen to work, or anything related to Design techniques, pls feel free to contact me, and you can be our guest author.


If you are reading article, you might also be interested in the PHP and Scriptaculous Book I have authored.

The book gives you insights about effects, drag-n-drop, slideshows, applications, auto-completion, in-place editing and more. Complete code snippets and explanations.

CHECK out and BUY the PHP and Script.aculo.us book {My Book} at Packt official site


About srinix

I am Sridhar, a matured nut, on this planet with water, air and love ;)

3 responses to “Web Design Tips #2: Alternate Row Colors in Resultset!!!!”

  1. conservatories says :

    Thanks these are very useful tips for my web design work, will impliment them into my designs

  2. Namrata says :

    I was just searching for this type of concept..i m using java in my project.so i have used while(rs.next()) for fetching database records..in this case how can i show the resultset value using alternative row colors..plz post code for that

  3. praveen says :

    if we display the table using a repater tag i.e the number rows is a dynamic value ,,,,how can we display them in different colors

    Thanks in advance

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: