Building a Table of Data in a Page

Some Visualforce components, such as <apex:pageBlockTable> or <apex:dataTable>, allow you to display information from multiple records at a time by iterating over a collection of records. To illustrate this concept, the following page uses the <apex:pageBlockTable> component to list the contacts associated with an account that is currently in context:

<apex:page standardController="Account">
   <apex:pageBlock title="Hello {!$User.FirstName}!">
      You are viewing the {!account.name} account.
   </apex:pageBlock>
   <apex:pageBlock title="Contacts">
      <apex:pageBlockTable value="{!account.Contacts}" var="contact">
         <apex:column value="{!contact.Name}"/>
         <apex:column value="{!contact.MailingCity}"/>
         <apex:column value="{!contact.Phone}"/>
      </apex:pageBlockTable>
   </apex:pageBlock>
</apex:page>

Note

Remember, for this page to display account data, the ID of a valid account record must be specified as a query parameter in the URL for the page. For example:

https://Salesforce_instance/apex/myPage?id=001x000xxx3Jsxb

Displaying Field Values with Visualforce has more information about retrieving the ID of a record.

The <apex:pageBlockTable> Component
The apex:pageBlockTable component displayed in the Visualforce code window. The page view displays 3 contact columns.

The apex:pageBlockTable component displayed in the Visualforce code window. The page view displays 3 contact columns.

Like other iteration components, <apex:pageBlockTable> includes two required attributes, value and var:

value takes a list of sObject records or values of any other Apex type. In the example above, {!account.Contacts} retrieves the ID of the account that is currently in context and then traverses the relationship to retrieve the list of the associated contacts.
var specifies the name of the iteration variable. This variable is used within the body of the <apex:pageBlockTable> tag to access the fields on each contact. In this example, value="{!contact.Name}" is used on the <apex:column> tag to display the name of the contact.

The <apex:pageBlockTable> component takes one or more child <apex:column> components. The number of rows in the table is controlled by the number of records returned with the value attribute.

Note

The <apex:pageBlockTable> component automatically takes on the styling of a standard Salesforce list. To display a list with your own styling, use <apex:dataTable> instead.