[SalesForce] Use Pageblock table instead table

I have problem as when I use table in my code then I am not getting good look and feel in my Visualforce. How can I set pageblock table in my Visualforce page code.

Visualforce Page code:

<apex:outputpanel id="pbTable">
     <table  border="2" >
       <apex:repeat value="{!mainMap }" var="goalDetails">
            <table  border="2" >
            <tr style="font-size:12px; font-weight:bold;">
                    <td> Goal Name </td>
                    <td> Goal Type</td>
                    <td> Completion Date </td>
                    <td> Description of Goal</td>
                    <td> Discontinued Date </td>
                    <td> Target Date</td>
            </tr>
              <tr style="font-size:11px;">
                <td width="10%">
                    {!goalDetails.Name}
                </td>
                <td width="10%">
                    {!goalDetails.Goal_Type__c}
                </td>
                <td width="10%">
                    {!goalDetails.Completion_Date__c}
               </td>
               <td width="10%">
                    {!goalDetails.Description_of_Goal__c}
               </td>
               <td width="10%">
                    {!goalDetails.Discontinued_Date__c}
               </td>
               <td width="10%">
                    {!goalDetails.Target_Date__c}
               </td>
            </tr>
          <tr> 
          <apex:repeat value="{!mainMap[goalDetails]}" var="objDetails">
            <table>
                <tr style="font-size:12px; font-weight:bold;">
                    <td> Objectives </td>
                    <td> Service Needed</td>
                    <td> Start Date </td>
                    <td> Target Date </td>
                    <td> Potential Barrier </td>
                    <td> Potential Strength </td>                        
                </tr>  
                <tr style="font-size:11px;">
                 <td width="10%">
                        {!objDetails.Describe_Objectives__c}
                    </td>
                    <td width="10%">
                        {!objDetails.Service_Needed__c}
                    </td>
                    <td width="10%">
                        {!objDetails.Start_Date__c}    
                    </td>
                    <td width="10%">
                        {!objDetails.Target_Date__c}
                    </td>
                    <td width="10%">
                        {!objDetails.Potential_Barrier__c}
                    </td>

                    <td width="10%">
                        {!objDetails.Potential_Strength__c}
                    </td>
                </tr>                    
                <tr>
                <p>*Note:Click on the objective count to see the details of the Dream Map {!strDreamMapName}.</p>
                 <apex:commandButton action="{!AddGoal}" value="Add Goal" id="theButton" />
                </tr>
              </table>
            </apex:repeat>
            </tr>                 
            </table>
       </apex:repeat> 
     </table>
   </apex:outputpanel>
  </apex:pageBlockSection>      
</apex:outputPanel>

Best Answer

It's pretty simple!

You can find how to use: http://www.salesforce.com/us/developer/docs/pages/Content/pages_compref_pageBlockTable.htm

Note the hierarchy being followed and keep the value currently kept in apex:repeat tag in your apex:pageBlockTable and tr will be replaced by apex:column

Related Topic