How to create a Tab Panel in Visaul Force Page

Whenever your planning to display any one or more objects data in visual force page .We can create a tabpanel and each tab represents one object.In this post I'm going to share simple example for tab panel and tab creation in visual force page.

Visual Force Page

 <apex:page controller="ListOfTabsCtrl">  
  <apex:pageBlock >  
   <apex:tabPanel width="1072px" >  
     <apex:tab label="Positions" labelWidth="358px" >  
      <apex:pageBlockTable value="{!listPos}" var="pos">  
        <apex:column >  
          <apex:outputLink value="/a07/e?CF00N1500000E1w1q={!pos.Name}&CF00N1500000E1w1q_lkid={!pos.id}" target="_blank">Apply </apex:outputLink>  
        </apex:column>  
        <apex:column value="{!pos.name}"/>  
        <apex:column value="{!pos.Status__c}"/>  
        <apex:column value="{!pos.Title__c}"/>  
        <apex:column value="{!pos.Closing_Date__c}"/>        
        <apex:column value="{!pos.Posting_URL__c}"/>  
        <apex:column value="{!pos.Category__c}"/>  
        <apex:column value="{!pos.Description__c}"/>  
       </apex:pageBlockTable>  
     </apex:tab>  
    <apex:tab label="Applicants" labelWidth="358px" >  
      <apex:pageBlockTable value="{!listApps}" var="apps">  
       <apex:column value="{!apps.name}"/>  
       <apex:column value="{!apps.First_Name__c}"/>  
       <apex:column value="{!apps.Last_Name__c}"/>  
       <apex:column value="{!apps.Mailing_Address1__c}"/>  
       <apex:column value="{!apps.Mailing_Address2__c}"/>  
       <apex:column value="{!apps.City__c}"/>  
       <apex:column value="{!apps.State__c}"/>  
       <apex:column value="{!apps.Zipcode__c}"/>  
       <apex:column value="{!apps.Email__c}"/>  
       <apex:column value="{!apps.Position_Id__c}"/>  
     </apex:pageBlockTable>  
    </apex:tab>  
    <apex:tab label="Categorys" labelWidth="358px">    
     <apex:pageBlockTable value="{!listCate}" var="cate">  
      <apex:column value="{!cate.Name}"/>  
       <apex:column value="{!cate.description__c }"/>  
     </apex:pageBlockTable>      
       </apex:tab>  
   </apex:tabPanel>  
 </apex:pageBlock>   
 </apex:page>  

Apex Class:

 public class ListOfTabsCtrl {  
  public List<Position__c> listPos{get;set;}  
  public List<Applicant__c> listApps{get;set;}  
  public List<Category__c> listCate{get;set;}  
  public ListOfTabsCtrl()  
  {  
  listPos = new List<Position__c>();  
  listApps = new List<Applicant__c>();  
  listCate = new List<Category__c>();  
  listPos = [SELECT Id, Name, Catg__c, Title__c, Description__c, Closing_Date__c, Posting_URL__c, Category__c, Status__c FROM Position__c where status__c ='Open'];  
  listApps = [SELECT Id, Name, First_Name__c, Last_Name__c, Mailing_Address1__c, Mailing_Address2__c, City__c, State__c, Zipcode__c, Email__c, Position_Id__c FROM Applicant__c];  
  listCate = [Select id,name,description__c from Category__c];  
  posTabSelected = true;  
  }  
 }  

Sample output look like as below image