Today, this is my table and if I select one of the row, it shows a select icon.

I want to make it more user-friend that you can see the whole row to be selected. Gmail has that functionality.

In my case, it is different because I have different color for every second row.

The question is how to make it more userfriendly in order to see a selected row instead of using icone symbol?

You also need to take account that I have 60 row and the user should be enable to select row i different row in different location in the table.

If I add a new background color if the row is selected, can it make it less userfriendly because there is too much color inside of table?

Any solution would be appreciated.


enter image description here

  • 3
    Use less color differentiation between the 2 existing ones, and use a 3rd, darker color for the selected/highlighted rows. You could improve UX further by allowing users to select a row by simply clicking on it, instead of allowing them to click on the checkbox only. – Edwin Lambregts Jun 16 '15 at 12:42

I am not a big fan of alternating background colors between rows. White space and visual grouping should do the trick in most cases.

In your case, I would use a lower contrast between the background colors. Use just enough so that the eye notices the change.

As far as selection, I don't see anything wrong with using a different background color, a stronger one this time.

enter image description here

  • Do you have a concrete example of "stronger one this time"? – What'sUP Jun 16 '15 at 12:52
  • Yes, the intense blue in my example, or any other color that creates a contrast e.g. accent colors – Ovidiu Berdila Jun 16 '15 at 12:59

Have you thought about a simple border for selection?

Here is a simple example: jsfiddle


If I'm interpreting you correctly, you can do this with jQuery. Once you've installed it, add a click event to each row that toggles a "selected" class:

$(document).on('click', 'tr', function(event){$(event.target).toggleClass('selected');})

If you have different "odd" and "even" classes for every other row, you CSS should look like this:


Keep in mind that toggling can be done without jQuery: https://stackoverflow.com/questions/18880890/how-do-i-toggle-an-elements-class-in-pure-javascript and even without JavaScript: https://stackoverflow.com/questions/25543956/toggle-class-on-html-element-without-jquery.

  • 1
    Hi @JohnHenry welcome to UX StackExchange! I'm not sure that the OP is asking about how to implement banded tables (which would be out of scope for UX). I believe the question is more UX oriented, as in: does the use of banded design create too much color/distraction in the table? – tohster Jun 18 '15 at 7:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.