Iterate Using Unstyled Lists and Tables - Visualforce

You have iterated over a list before in Tutorial #5: Using Standard User Interface Components. The <apex:pageBlockTable> component you used produced output that conforms to the standard platform look and feel. Visualforce has a mirror suite of components that allow you to iterate without producing anything other than standard HTML—letting you customize it as you wish.

1. Add the following to your accountDisplayVisualforce page:

   <apex:dataTable value="{!account.contacts}" var="item">
       <apex:column value="{!item.name}"/> 
       <apex:column value="{!item.phone}"/>
   </apex:dataTable>

   If you don’t see any output, make sure you’re passing the identifier of an account as a parameter. The output will look fairly plain when unstyled, but that’s the point—you can now style this as you wish with standard CSS.
2. You can also produce a standard HTML unordered list instead of a table by using the <apex:dataList> component. Try this:

   <apex:dataList value="{!account.contacts}" var="item">
       <apex:outputText value="{!item.name}"/>
   </apex:dataList>

3. If you’d like absolute control, use the <apex:repeat> component that simply iterates. You have to do all the outputting yourself. For example, you can mimic the output of the<apex:dataList> component as follows:

   <ul>
       <apex:repeat value="{!account.contacts}" var="item">
           <li><apex:outputText value="{!item.name}"/></li>
       </apex:repeat>
   </ul>