Listing data on Visualforce with customized look n feel

datatable

<!-- For this example to render fully, associate the page with a valid account record in the URL. For example: https://Salesforce_instance/apex/myPage?id=001D000000IRt53 --> <!-- Page: --> <apex:page controller="dataTableCon" id="thePage"> <apex:dataTable value="{!accounts}" var="account" id="theTable" rowClasses="odd,even" styleClass="tableClass"> <apex:facet name="caption">table caption</apex:facet> <apex:facet name="header">table header</apex:facet> <apex:facet name="footer">table footer</apex:facet> <apex:column> <apex:facet name="header">Name</apex:facet> <apex:facet name="footer">column footer</apex:facet> <apex:outputText value="{!account.name}"/> </apex:column> <apex:column> <apex:facet name="header">Owner</apex:facet> <apex:facet name="footer">column footer</apex:facet> <apex:outputText value="{!account.owner.name}"/> </apex:column> </apex:dataTable> </apex:page> /*** Controller: ***/ public class dataTableCon { List<Account> accounts; public List<Account> getAccounts() { if(accounts == null) accounts = [SELECT name, owner.name FROM account LIMIT 10]; return accounts; } }

datalist

<!-- Page: --> <apex:page controller="dataListCon"> <apex:dataList value="{!accounts}" var="account"> <apex:outputText value="{!account.Name}"/> </apex:dataList> </apex:page> /*** Controller: ***/ public class dataListCon { List<Account> accounts; public List<Account> getAccounts() { if(accounts == null) accounts = [SELECT Name FROM Account LIMIT 10]; return accounts; } }

repeat

<!-- For this example to render properly, you must associate the Visualforce page with a valid account record in the URL. For example, if 001D000000IRt53 is the account ID, the resulting URL should be: https://Salesforce_instance/apex/myPage?id=001D000000IRt53 <!-- Page: --> <apex:page standardController="Account"> <table border="0" > <tr> <th>Case Number</th><th>Origin</th> <th>Creator Email</th><th>Status</th> </tr> <apex:repeat var="cases" value="{!Account.Cases}"> <tr> <td>{!cases.CaseNumber}</td> <td>{!cases.Origin}</td> <td>{!cases.Contact.email}</td> <td>{!cases.Status}</td> </tr> </apex:repeat> </table> </apex:page>