Hi,

We have a requirement for rows to have different colors based on the record value. There are many online example how to achieve zebra style colors (odd,even), and we are using it now. However, I have not found a solution for multiple colors. (and also my css file does not affect table when i put "odd" and "even" styles into css file. It only works when it is embedded into VF page. ). Here is the VF page:

<apex:page controller="ContactController" showHeader="false" sidebar="false" standardStylesheets="false">
<style>
.odd {background-color: #FCF7F7;}
.even {background-color: #E3DCDB;}
</style>
<apex:stylesheet value="{!URLFOR($Resource.contactCss)}"/>
<apex:messages />

<apex:outputText style="font: normal normal 14px/30px Verdana, Arial, Georgia, serif;" rendered="{!NOT(ISNULL(contacts)) && contacts.size > 0}" value="School of Social Work Directory" />
<BR />
<apex:outputText style="font: normal normal 12px/30px Verdana, Arial, Georgia, serif;" rendered="{!NOT(ISNULL(contacts)) && contacts.size > 0}" value="Generated: {!NOW()}" />
<BR />
<BR />
<apex:pageBlock rendered="{!NOT(ISNULL(contacts)) && contacts.size > 0}" >


     <apex:dataTable value="{!contacts}" var="c" border="2" cellpadding="2" id="theTable" rowClasses="odd,even">
    
        <apex:column value="{!c.Name}" headerValue="Name" styleClass="cell" />
        <apex:column value="{!c.Phone}" headerValue="Phone" styleClass="cell" width="200px"/>
        <apex:column value="{!c.Location__c}" headerValue="Location" styleClass="cell"/>
        <apex:column value="{!c.Email}" headerValue="Email" styleClass="cell"/>        
        <apex:column value="{!c.Title}" headerValue="Title" styleClass="cell"/>
        
     </apex:dataTable>

</apex:pageBlock>
</apex:page>

 Here is static resource file:

.odd {background-color: #FCF7F7;}
.even {background-color: #E3DCDB;}
.table  
{
border-collapse:collapse;
width:100%;
border:1px solid black;
padding:2px;
}
th 
{
border:1px solid black;
padding:2px;
font: normal bold 11px/30px Verdana, Arial, Georgia, serif;
}
.cell 
{
border:1px solid black;
padding:2px;
font: normal normal 11px/30px Verdana, Arial, Georgia, serif;
}

 Thanks.