Conditional Table Cell Styling

Here is a link for a demo:

http://tcs-8demo-developer-edition.na14.force.com/blog3demo

For this blog, I am using the controller that I created for my previous blog. To see the sample code for the controller, please refer back to my previous blog. 

Here is the sample Visualforce code:

<apex:page controller="Blog2DemoController" showHeader="false">
    
    <style>
        .expTable, .expTable th, .expTable td{
        font-size:14px;
        margin:auto;
        border: 1px solid black;
        }
        
        .col2{
        text-align:right;
        }
        
        .red{
        background-color:red;
        }
        
        .blue{
        background-color:blue;
        }
        
        .yellow{
        background-color:yellow;
        }
    </style>    
    
    <apex:form >  
        <center>
            <apex:selectList value="{!selYear}" label="Year" multiselect="False" size="1" style="width:400px;" onchange="updateReports();">
                <apex:selectOptions value="{!YRoptions}"/>
            </apex:selectList>
            
            <apex:actionFunction action="{!filterYear}" name="updateReports" rerender="mainPanel">
            </apex:actionFunction>
        </center>
    </apex:form>
    
    
    
    <div id="mainPanelDiv">
        
        <apex:outputPanel id="mainPanel">          
            
            
            
            <apex:dataTable value="{!TableVal}" var="exp" styleClass="expTable" cellpadding="5px" columnClasses="col1, col2">
                <apex:column headerValue="Expense Type" value="{!exp.title}"/>
                <apex:column headerValue="Total Amount" styleClass="{!if(exp.val > 7500, 'red', if(exp.val > 2500, 'yellow', 'blue'))}">
                    <apex:outputText value="{0, number, $###,###,###.##}" >
                        <apex:param value="{!exp.val}" />
                    </apex:outputText>
                </apex:column>
            </apex:dataTable>
            
            <br/>
            
            <apex:dataTable value="{!MTableVal}" var="exp" styleClass="expTable" cellpadding="5px" columnClasses="col1, col2">
                <apex:column headerValue="Month" value="{!exp.title}"/>
                <apex:column headerValue="Total Amount" styleClass="{!if(exp.val > 7500, 'red', if(exp.val > 2500, 'yellow', 'blue'))}">
                    <apex:outputText value="{0, number, $###,###,###.##}" >
                        <apex:param value="{!exp.val}" />
                    </apex:outputText>
                </apex:column>
            </apex:dataTable>
            
            <br/>
            
            <apex:dataTable value="{!CTableVal}" var="exp" styleClass="expTable" cellpadding="5px" columnClasses="col1, col2">
                <apex:column headerValue="Company" value="{!exp.title}"/>
                <apex:column headerValue="Total Amount" styleClass="{!if(exp.val > 7500, 'red', if(exp.val > 2500, 'yellow', 'blue'))}">
                    <apex:outputText value="{0, number, $###,###,###.##}" >
                        <apex:param value="{!exp.val}" />
                    </apex:outputText>
                </apex:column>
            </apex:dataTable>
            
        </apex:outputPanel>
        
    </div>
</apex:page>

The main parts of this page are:

<style></style> section - this area is where you input the css styling. You could also link to a CSS file by using <apex:stylesheet/>

<apex:column headerValue="Total Amount" styleClass="{!if(exp.val > 7500, 'red', if(exp.val > 2500, 'yellow', 'blue'))}"> - this is the column for your table cell. In this code line, you can include a styleClass. By using an if statement, you can dynamically select a class in your CSS depending on the value for that cell.