[SalesForce] Need help with html table in visualforce

I need to display visualforcepage in below format. Please help me on this.

My code mentioned below is not working as per the requirement.
it is repeating (first header)OLI category name and second header(Approverlevel,approvername,satus,comments) for each row. Can some one suggest me how can I achieve this?

OLI category name -----> header one
Approverlevel Approvername  status       comments ------>header two
VP            AABC          Approved      valid
SVP           AAbbc         Approved      valid
OLI category name
Approverlevel Approvername   status    comments
GM             AABC          Approved     valid
SVP           AAbbc         Approved      Valid
RD            Abbc          Approved      valid
OLI category name
Approverlevel Approvername   status(pick list)    comments(text)
GM             AABC          Approved             valid
SVP            AAbbc         Approved             Valid
RD             Abbc          Approved             valid

controller:

public class OpportunityHandlerinline{  
    Opportunity O;
    public string opportunirtyid{get; set;}
    public boolean approvalneeded{get; set;}

    public OpportunityHandlerinline() {
       opportunirtyid  = ApexPages.currentPage().getParameters().get('id');    
       opportunity op = [select Approval_Needed__c from opportunity where id=: opportunirtyid ];
       op.Approval_Needed__c = approvalneeded;
    }


    public List<Opportunity_Approval_History__c> getapprovallist(){

        List<Opportunity_Approval_History__c> ls = [select Approver_name__r.name,Approverlevel__c,comments__c,Status__c,OLI_Category__c from Opportunity_Approval_History__c where  Opportunity__c =:opportunirtyid];
               return ls;                
     }         
}

visuaforcepage:

<apex:page Controller="OpportunityHandlerinline">
<apex:form >
<style type="text/css">
        .sbold { "font-weight: bold;"
         "font-color:#0000FF"}
</style>
    <apex:pageblock >         

              <apex:repeat value="{!approvallist}" var="app">

        <table style="width:100%">

          <tr style="font-weight: bold;font-color:#3366ff;">
            <td style= "font-size: 125%;" bgcolor="#E633FF">{!app.OLI_Category__c}</td>
          </tr>

          <tr style="font-weight: bold;font-color:#3366ff;">
            <td bgcolor="#33FFD7">Approver Levels</td>

            <td bgcolor="#33FFD7">Approvers</td>
            <td bgcolor="#33FFD7">Approval Status</td>

            <td bgcolor="#33FFD7">Comments</td>
          </tr>
          <tr width = "100%">
            <td width = "25%">{!app.Approverlevel__c}</td>
            <td width = "25%">{!app.Approver_name__r.name}</td>
            <td width = "25%"> {!app.comments__c}</td>
            <td width = "25%">{!App.Status__c}
            </td>
          </tr>         

        </table>    

        </apex:repeat>    

    </apex:pageblock>
</apex:form>
</apex:page>

@Eric I tried with page block too. but I am unable to get headerone(OLI category) and header to repeatedly after some rows.please see my code attached. Approverlevel

    <apex:column >
        <apex:facet name="header">Approvername</apex:facet>
        <apex:outputField value="{!App.Approver_name__c}"/>
    </apex:column>

    <apex:column >
        <apex:facet name="header">comments</apex:facet>
        <apex:outputField value="{!App.comments__c}"/>
    </apex:column>
    <apex:column >
        <apex:facet name="header">status</apex:facet>
        <apex:outputField value="{!App.Status__c}"/>
    </apex:column>
</apex:pageBlockTable>

Best Answer

You just made a simple mistake,You are using Repeat tag to repeat hole table. You can use like this EXample--->

  <tr style="font-weight: bold;font-color:#3366ff;">
    <td bgcolor="#33FFD7">Approver Levels</td>

    <td bgcolor="#33FFD7">Approvers</td>
    <td bgcolor="#33FFD7">Approval Status</td>

    <td bgcolor="#33FFD7">Comments</td>
  </tr>
  <apex:repeat value="{!approvallist}" var="app">
 <tr style="font-weight: bold;font-color:#3366ff;">
    <td colspan="3" style= "font-size: 125%;" bgcolor="#E633FF">{!app.OLI_Category__c}</td>
  </tr>

  <tr width = "100%">
    <td width = "25%">{!app.Approverlevel__c}</td>
    <td width = "25%">{!app.Approver_name__r.name}</td>
    <td width = "25%"> {!app.comments__c}</td>
    <td width = "25%">{!App.Status__c}
    </td>
  </tr>         

</apex:repeat> 
</table>    
Related Topic