Tutorial: Quick Tip: Alternating Row Colors in Tables

When displaying tables or matrices with many rows and columns, sometimes it is helpful for the survey taker to be able to easily identify each row within the table or matrix. A simple way to provide the visual aid is to alternate the colors of each row by making every other row have a slight background color, usually gray. Luckily, this can be accomplished with a simple adjustment to the Look & Feel section of your survey.

Making changes to Look & Feel

• Scroll down to the large box titled This Theme’s CSS Template
• You will find the following code near the bottom:

  table.sg_Table tr.sg_TR { }

• You will want to add the background-color: #EEEEEE;. The results:

  table.sg_Table tr.sg_TR { background-color: #EEEEEE; }

  Note: You can change the #EEEEEE hex code to represent any color. You can even replace it with the word ‘red’ (no quotes) if you are not comfortable with hexadecimal color codes (alternate site).

• Click Save Your Customizations

Secondary Tip: Continuing the Color Through Row Headers (far left column)

Add the following as an addendum to the bottom of the CSS Template box:

table.sg_Table tr.sg_TR td.sg_TD1 { background-color: #EEEEEE;}

For Custom Matrices

When you have a custom matrix you must add some extra code. Repeat this, changing the .sg_Group# for each question group in your largest custom matrix. The color code should match the one used in the above changes.

table.sg_Table tr.sg_TR td.sg_Group1 { background-color: #EEEEEE; }
table.sg_Table tr.sg_TR td.sg_Group2 { background-color: #EEEEEE; }

That’s it! If you have any further questions, feel free to check out our forums and contribute to the community!