+ Start a Discussion
Adam LeeAdam Lee 

HTML Table in PageBlockSection

Hi guys,

Any ideas why the formatting of an HTML table looks fine in a PageBlock and all over the place in a pgaeblocksection?

PageBlock
User-added image

PageBlockSection
User-added image

I already have a pageblock you see and dont want another pageblock within a pageblock. 

Any advice would be greatly appreciated

Thanks

Adam
Best Answer chosen by Adam Lee
Keyur  ModiKeyur Modi
Hi,
correct your VF page code with below code,
<!-------------- Lapse --------------->
  
            <apex:pageBlockSection columns="1" id="Lapse" rendered="{!IF(pickchoice== 'Lapse', true , false)}">
     <html>
                  
<table width="100%" cellspacing="0">
            <tr>
                <td style="width:150px;border-bottom:1px solid #E8E8E8">
                &nbsp;&nbsp;
                </td>
                <td style="font-weight:bold;text-align:center;border-bottom:1px solid #E8E8E8">
                
                   <p style="color:Black; font-weight: bold"> Year 1</p>
                                
                </td>
                
                <td style="font-weight:bold;text-align:center;border-bottom:1px solid #E8E8E8">
                
                   <p style="color:Black; font-weight: bold"> Year 2</p>
                                
                </td>
           
               <td style="font-weight:bold;text-align:center;border-bottom:1px solid #E8E8E8">
                
                   <p style="color:Black; font-weight: bold"> Year 3</p>
                                
                </td>
         
                <td style="font-weight:bold;text-align:center;border-bottom:1px solid #E8E8E8">
                
                   <p style="color:Black; font-weight: bold"> Year 4</p>
                                
                </td>
                
               <td style="width:150px;">
                &nbsp;               
               </td>           
               </tr>
    
    
               <tr>
                   
                <td style="text-align:right;border-bottom:1px solid #E8E8E8">
                <p styleclass="label" style="font-weight:bold;"> Lapse APE </p>
                </td>
                   
                <td style="text-align:center;border-bottom:1px solid #E8E8E8">
                
                 <p style="color:red; font-weight: bold">
                  {!Agency__c.DQM_Lapse_Year_1_APE__c} </p>   
                
                              
                </td>
                <td style="text-align:center;border-bottom:1px solid #E8E8E8">
               <p style="color:red; font-weight: bold">
                 {!Agency__c.DQM_Lapse_Year_2_APE__c} </p>
             
                                             
                </td>

See as change copule of the <td> which was highlighted with bold letter, same way you need to change all <td> same as above code . Hope this will help you.

Thanks,
Keyur Modi

All Answers

Keyur  ModiKeyur Modi
Hi,
plz share you code, from the image i can see that you are using <apex:pageblockSection> in place of that use collumn attribute like this

<apex:pageBlockSection columns="1">
hope this will help.
please let me know if this will help.

Thanks,
Keyur Modi
Adam LeeAdam Lee
<apex:page standardcontroller="Agency__c" extensions="dqmExt">
  <apex:form >
    
    <apex:selectList value="{!pickchoice}" multiselect="false" size="1">
     Please select a metric &nbsp;  <apex:selectOptions value="{!items}"/>
     <apex:actionSupport event="onchange" rerender="DQM"/>
    </apex:selectList>
        &nbsp;
        Last Updated: 
        &nbsp; 
        <apex:outputText label="Last Updated" value="{0,date,dd'/'MM'/'yyyy}">
          <apex:param value="{!Agency__c.DQM_Last_Updated_Date__c}"/>
          </apex:outputText>
        <apex:pageBlock> 
        <apex:pageBlockSection columns="1" id="DQM">
            

     <!------------- CFO --------------->
        
      <apex:pageBlockSection id="CFO"  rendered="{!IF(pickchoice== 'CFO', true , false)}" >
        
	<apex:outputText label="Completed APE" value="{0,number,£###,###.##}">
          <apex:param value="{!Agency__c.DQM_Completed_APE__c}"/>
     </apex:outputText>
          
          <apex:outputText label="Completed Count"  value="{!Agency__c.DQM_Completed_Count__c}" />
          
          <apex:outputText label="CFO APE" value="{0,number,£###,###.##}" >
            <apex:param value="{!Agency__c.DQM_CFO_APE__c}"/>
          </apex:outputText>
                                                                                         
		<apex:outputText label="CFO APE %"  value="{!Agency__c.DQM_CFO_APE_Percent__c}"/>        
        <apex:outputText label="CFO Count"  value="{!Agency__c.DQM_CFO_Count__c}" />
        <apex:outputText label="CFO Count %"  value="{!Agency__c.DQM_CFO_Count_Percent__c}"/>
          
          </apex:pageBlockSection>
        

        <!-------------- NTU --------------->
        
        <apex:pageBlockSection id="NTU"  rendered="{!IF(pickchoice== 'NTU', true , false)}">

            
            <apex:outputText label="Received APE" value="{0,number,£###,###.##}">
            <apex:param value="{!Agency__c.DQM_Received_APE__c}"/>
            </apex:outputText>
            
<apex:outputText label="Received Count"  value="{!Agency__c.DQM_Received_Count__c}" />
            
          <apex:outputText label="NTU APE" value="{0,number,£###,###.##}">
            <apex:param value="{!Agency__c.DQM_NPW_APE__c}"/>
            </apex:outputText>
   
            <apex:outputText label="NTU APE %"  value="{!Agency__c.DQM_NPW_APE_Percent__c}"/>
            <apex:outputText label="NTU Count"  value="{!Agency__c.DQM_NPW_Count__c}"/>
            <apex:outputText label="NTU Count %"  value="{!Agency__c.DQM_NPW_Count_Percent__c}"/>
        
            
            
        </apex:pageBlockSection>
        
         
        <!-------------- Lapse --------------->
  
            <apex:pageBlockSection id="Lapse" rendered="{!IF(pickchoice== 'Lapse', true , false)}">
     <html>
                  
<table width="100%" cellspacing="0">
            <tr>
                <td style="width:150px;border-bottom:1px solid #E8E8E8">
                &nbsp;&nbsp;
                </td>
                
                <td style="font-weight:bold;text-align:center;border-bottom:1px solid #E8E8E8">
                <apex:outputPanel >
                 <span style="color:Black; font-weight: bold">
                  <apex:outputLabel value="Year 1"/>   
                 </span>  
                </apex:outputPanel>                               
                </td>
                
               
                <td style="font-weight:bold;text-align:center;border-bottom:1px solid #E8E8E8">
                <apex:outputPanel >
                 <span style="color:Black; font-weight: bold">
                  <apex:outputLabel value="Year 2"/>   
                 </span>  
                 </apex:outputPanel> 
                </td>
                    
                <td style="font-weight:bold;text-align:center;border-bottom:1px solid #E8E8E8">
                <apex:outputPanel >
                 <span style="color:Black; font-weight: bold">
                  <apex:outputLabel value="Year 3"/>   
                 </span>  
                </apex:outputPanel>  
                
                </td>
                <td style="font-weight:bold;text-align:center;border-bottom:1px solid #E8E8E8">
                <apex:outputPanel >
                 <span style="color:Black; font-weight: bold">
                  <apex:outputLabel value="Year 4"/>   
                 </span>  
                </apex:outputPanel>  
                
               </td>  
               <td style="width:150px;">
                &nbsp;               
               </td>           
               </tr>
               <tr>
                   
                <td style="text-align:right;border-bottom:1px solid #E8E8E8">
                <apex:outputText styleclass="label" value="Lapse APE" style="font-weight:bold;"/>
                </td>
                   
                <td style="text-align:center;border-bottom:1px solid #E8E8E8">
                 <apex:outputPanel >
                 <span style="color:red; font-weight: bold">
                  <apex:outputField value="{!Agency__c.DQM_Lapse_Year_1_APE__c}"/>   
                 </span>  
                </apex:outputPanel>  
                              
                </td>
                <td style="text-align:center;border-bottom:1px solid #E8E8E8">
                 <apex:outputPanel >
                 <span style="color:red; font-weight: bold">
                  <apex:outputField value="{!Agency__c.DQM_Lapse_Year_2_APE__c}"/>   
                 </span>  
                </apex:outputPanel>  
                                             
                </td>
                <td style="text-align:center;border-bottom:1px solid #E8E8E8">
                 <apex:outputPanel >
                 <span style="color:red; font-weight: bold">
                  <apex:outputField value="{!Agency__c.DQM_Lapse_Year_3_APE__c}"/>   
                 </span>  
                </apex:outputPanel>  
                                              
                </td>
                <td style="text-align:center;border-bottom:1px solid #E8E8E8">
                 <apex:outputPanel >
                 <span style="color:red; font-weight: bold">
                  <apex:outputField value="{!Agency__c.DQM_Lapse_Year_4_APE__c}"/>   
                 </span>  
                 </apex:outputPanel> 
                </td>    
                   
               <td style="width:150px;">
                &nbsp;               
               </td>                              
               </tr>
                <tr>
                <td style="text-align:right;border-bottom:1px solid #E8E8E8">
                <apex:outputLabel value="Lapse APE %" style="font-weight:bold;"/>
                </td>
                <td style="text-align:center;border-bottom:1px solid #E8E8E8">
                 <apex:outputPanel >
                 <span style="color:red; font-weight: bold">
                  <apex:outputField value="{!Agency__c.DQM_Lapse_Year_1_APE_Percent__c}"/>   
                 </span>  
                </apex:outputPanel>  
                                              
                </td>
                <td style="text-align:center;border-bottom:1px solid #E8E8E8">
                 <apex:outputPanel >
                 <span style="color:red; font-weight: bold">
                  <apex:outputField value="{!Agency__c.DQM_Lapse_Year_2_APE_Percent__c}"/>   
                 </span>  
                </apex:outputPanel> 
                    
                </td>
                <td style="text-align:center;border-bottom:1px solid #E8E8E8">
                 <apex:outputPanel >
                 <span style="color:red; font-weight: bold">
                  <apex:outputField value="{!Agency__c.DQM_Lapse_Year_3_APE_Percent__c}"/>   
                 </span>  
                </apex:outputPanel> 
                    
                </td>
                <td style="text-align:center;border-bottom:1px solid #E8E8E8">
                 <apex:outputPanel >
                 <span style="color:red; font-weight: bold">
                  <apex:outputField value="{!Agency__c.DQM_Lapse_Year_4_APE_Percent__c}"/>   
                 </span>  
                </apex:outputPanel> 
                    
                </td>     
               <td style="width:150px;">
                &nbsp;               
               </td>                             
               </tr>
                              <tr>
                <td style="text-align:right;border-bottom:1px solid #E8E8E8">
                <apex:outputLabel value="Lapse Count" style="font-weight:bold;"/>
                </td>
                <td style="text-align:center;border-bottom:1px solid #E8E8E8">
                 <apex:outputPanel >
                 <span style="color:red; font-weight: bold">
                  <apex:outputField value="{!Agency__c.DQM_Lapse_Year_1_Count__c}"/>   
                 </span>  
                </apex:outputPanel>  
                                            
                </td>
                <td style="text-align:center;border-bottom:1px solid #E8E8E8">
                 <apex:outputPanel >
                 <span style="color:red; font-weight: bold">
                  <apex:outputField value="{!Agency__c.DQM_Lapse_Year_2_Count__c}"/>   
                 </span>  
                </apex:outputPanel>    
                </td>
                                  
                <td style="text-align:center;border-bottom:1px solid #E8E8E8">
                 <apex:outputPanel >
                 <span style="color:red; font-weight: bold">
                  <apex:outputField value="{!Agency__c.DQM_Lapse_Year_3_Count__c}"/>   
                 </span>  
                </apex:outputPanel> 
                </td>
                                  
                <td style="text-align:center;border-bottom:1px solid #E8E8E8">
                 <apex:outputPanel >
                 <span style="color:red; font-weight: bold">
                  <apex:outputField value="{!Agency__c.DQM_Lapse_Year_4_Count__c}"/>   
                 </span>  
                </apex:outputPanel>   
                </td>     
                                  
               <td style="width:150px;">
                &nbsp;               
               </td>                             
               </tr>               
                              <tr>
                <td style="text-align:right;border-bottom:1px solid #E8E8E8">
                <apex:outputLabel value="Lapse Count %" style="font-weight:bold;"/>
                </td>
                <td style="text-align:center;border-bottom:1px solid #E8E8E8">
                 <apex:outputPanel >
                 <span style="color:red; font-weight: bold">
                  <apex:outputField value="{!Agency__c.DQM_Lapse_Year_1_Count_Percent__c}"/>   
                 </span>  
                </apex:outputPanel>                                
                </td>
                                  
                <td style="text-align:center;border-bottom:1px solid #E8E8E8">
                <apex:outputPanel >
                 <span style="color:red; font-weight: bold">
                  <apex:outputField value="{!Agency__c.DQM_Lapse_Year_2_Count_Percent__c}"/>   
                 </span>  
                </apex:outputPanel>                                
                </td>
                                  
                <td style="text-align:center;border-bottom:1px solid #E8E8E8">
                 <apex:outputPanel >
                 <span style="color:red; font-weight: bold">
                  <apex:outputField value="{!Agency__c.DQM_Lapse_Year_3_Count_Percent__c}"/>   
                 </span>  
                </apex:outputPanel>                               
                </td>
                                  
                <td style="text-align:center;border-bottom:1px solid #E8E8E8">
                 <apex:outputPanel >
                 <span style="color:red; font-weight: bold">
                  <apex:outputField value="{!Agency__c.DQM_Lapse_Year_4_Count_Percent__c}"/>   
                 </span>  
                </apex:outputPanel>   
                </td>     
                                  
               <td style="width:150px;">
                &nbsp;               
               </td>                             
               </tr>
              </table> 
           </html>   
           
            </apex:pageBlockSection>

 
            
            <!-------------- CYD --------------->
            
            <apex:pageBlockSection id="CYD" rendered="{!IF(pickchoice== 'CYD', true , false)}" >
                
            <apex:outputText label="Issued Count" value="{!Agency__c.DQM_CYD_Issued_Count__c}"/><br></br>
            <apex:outputText label="Returned Count" value="{!Agency__c.DQM_CYD_Returned_Count__c}"/>
            <apex:outputText label="Amended Count" value="{!Agency__c.DQM_CYD_Amended_Count__c}"/>
            <apex:outputText label="Returned Count %" value="{!Agency__c.DQM_CYD_Returned_Percent__c}"/>
            <apex:outputText label="Amended Count %" value="{!Agency__c.DQM_CYD_Amended_Percent__c}"/>

            </apex:pageBlockSection>
            
            <!-------------- ND --------------->
            
            <apex:pageBlockSection id="ND" rendered="{!if(pickchoice== 'ND',true,false)}">
			
            <apex:outputText label="Total Lives Count" value="{!Agency__c.DQM_ND_Total_Lives_Count__c}"/><br></br>
            <apex:outputText label="ND Lives Count" value="{!Agency__c.DQM_ND_Lives_Count__c}"/>
            <apex:outputText label="ND Rel Lives Count" value="{!Agency__c.DQM_ND_Relevant_Lives_Count__c}"/>
            <apex:outputText label="ND Lives %" value="{!Agency__c.DQM_ND_Lives_Percent__c}"/>
            <apex:outputText label="ND Rel Lives %" value="{!Agency__c.DQM_ND_Relevant_Lives_Percent__c}"/>            
            
            </apex:pageBlockSection>
            
                         
        </apex:pageBlockSection>
     </apex:pageBlock>
  </apex:form>
</apex:page>
Adam LeeAdam Lee
Its the 'Lapse' part
Keyur  ModiKeyur Modi
Hi,
 I tried a part of your code in my instance and i found this solution
 
<apex:page >
  <!-------------- Lapse --------------->
<apex:pageBlock > 
            <apex:pageBlockSection id="Lapse" columns="1" collapsible="false" title="Details">
     <html>
                  
<table width="100%" cellspacing="0">
            <tr>
                <td style="width:30px;border-bottom:1px solid #E8E8E8">
                &nbsp;&nbsp;
                </td>
                
                <td style="font-weight:bold;text-align:center;border-bottom:1px solid #E8E8E8">
                
                 
                  <p style="color:Black; font-weight: bold"> Year 1</p>   
                 
                                             
                </td>
                
               
                <td style="font-weight:bold;text-align:center;border-bottom:1px solid #E8E8E8">
                
                 <p style="color:Black; font-weight: bold"> Year 2</p>    
                
                </td>
                    
                <td style="font-weight:bold;text-align:center;border-bottom:1px solid #E8E8E8">
               
                
                  <p style="color:Black; font-weight: bold"> Year 3</p>   
         
                
                </td>
                <td style="font-weight:bold;text-align:center;border-bottom:1px solid #E8E8E8">
               
                  <p style="color:Black; font-weight: bold"> Year 4</p>   
                
                
               </td>  
                        
               </tr>
            </table>
            </html>
           </apex:pageBlockSection>
         </apex:pageBlock> 
</apex:page>
This is working fine with <apex:pageblockSection>
i changes <apex:outPutPanel> and <apex:outputLabel> with HTML tag <p>

please let me know if this will help,

Thanks,
Keyur Modi
 
Adam LeeAdam Lee
Thanks but the format is still all over the place
Keyur  ModiKeyur Modi
Hi,

can you share the updated code and the snapshot of the output , so that  I can identify the issue. Because I tried the little code from your code .. it is working fine.

Thanks,
Keyur Modi
Adam LeeAdam Lee
User-added image
 
<apex:page standardcontroller="Agency__c" extensions="dqmExt">
  <apex:form >
    
    <apex:selectList value="{!pickchoice}" multiselect="false" size="1">
     Please select a metric &nbsp;  <apex:selectOptions value="{!items}"/>
     <apex:actionSupport event="onchange" rerender="DQM"/>
    </apex:selectList>
        &nbsp;
        Last Updated: 
        &nbsp; 
        <apex:outputText label="Last Updated" value="{0,date,dd'/'MM'/'yyyy}">
          <apex:param value="{!Agency__c.DQM_Last_Updated_Date__c}"/>
          </apex:outputText>
        <apex:pageBlock> 
        <apex:pageBlockSection columns="1" id="DQM">
            

     <!------------- CFO --------------->
        
      <apex:pageBlockSection id="CFO"  rendered="{!IF(pickchoice== 'CFO', true , false)}" >
        
	<apex:outputText label="Completed APE" value="{0,number,£###,###.##}">
          <apex:param value="{!Agency__c.DQM_Completed_APE__c}"/>
     </apex:outputText>
          
          <apex:outputText label="Completed Count"  value="{!Agency__c.DQM_Completed_Count__c}" />
          
          <apex:outputText label="CFO APE" value="{0,number,£###,###.##}" >
            <apex:param value="{!Agency__c.DQM_CFO_APE__c}"/>
          </apex:outputText>
                                                                                         
		<apex:outputText label="CFO APE %"  value="{!Agency__c.DQM_CFO_APE_Percent__c}"/>        
        <apex:outputText label="CFO Count"  value="{!Agency__c.DQM_CFO_Count__c}" />
        <apex:outputText label="CFO Count %"  value="{!Agency__c.DQM_CFO_Count_Percent__c}"/>
          
          </apex:pageBlockSection>
        

        <!-------------- NTU --------------->
        
        <apex:pageBlockSection id="NTU"  rendered="{!IF(pickchoice== 'NTU', true , false)}">

            
            <apex:outputText label="Received APE" value="{0,number,£###,###.##}">
            <apex:param value="{!Agency__c.DQM_Received_APE__c}"/>
            </apex:outputText>
            
<apex:outputText label="Received Count"  value="{!Agency__c.DQM_Received_Count__c}" />
            
          <apex:outputText label="NTU APE" value="{0,number,£###,###.##}">
            <apex:param value="{!Agency__c.DQM_NPW_APE__c}"/>
            </apex:outputText>
   
            <apex:outputText label="NTU APE %"  value="{!Agency__c.DQM_NPW_APE_Percent__c}"/>
            <apex:outputText label="NTU Count"  value="{!Agency__c.DQM_NPW_Count__c}"/>
            <apex:outputText label="NTU Count %"  value="{!Agency__c.DQM_NPW_Count_Percent__c}"/>
        
            
            
        </apex:pageBlockSection>
        
         
        <!-------------- Lapse --------------->
  
            <apex:pageBlockSection columns="1" id="Lapse" rendered="{!IF(pickchoice== 'Lapse', true , false)}">
     <html>
                  
<table width="100%" cellspacing="0">
            <tr>
                <td style="width:150px;border-bottom:1px solid #E8E8E8">
                &nbsp;&nbsp;
                </td>
                <td style="font-weight:bold;text-align:center;border-bottom:1px solid #E8E8E8">
                
                   <p style="color:Black; font-weight: bold"> Year 1</p>
                                
                </td>
                
                <td style="font-weight:bold;text-align:center;border-bottom:1px solid #E8E8E8">
                
                   <p style="color:Black; font-weight: bold"> Year 2</p>
                                
                </td>
           
               <td style="font-weight:bold;text-align:center;border-bottom:1px solid #E8E8E8">
                
                   <p style="color:Black; font-weight: bold"> Year 3</p>
                                
                </td>
         
                <td style="font-weight:bold;text-align:center;border-bottom:1px solid #E8E8E8">
                
                   <p style="color:Black; font-weight: bold"> Year 4</p>
                                
                </td>
                
               <td style="width:150px;">
                &nbsp;               
               </td>           
               </tr>
    
    
               <tr>
                   
                <td style="text-align:right;border-bottom:1px solid #E8E8E8">
                <apex:outputText styleclass="label" value="Lapse APE" style="font-weight:bold;"/>
                </td>
                   
                <td style="text-align:center;border-bottom:1px solid #E8E8E8">
                 <apex:outputPanel >
                 <span style="color:red; font-weight: bold">
                  <apex:outputField value="{!Agency__c.DQM_Lapse_Year_1_APE__c}"/>   
                 </span>  
                </apex:outputPanel>  
                              
                </td>
                <td style="text-align:center;border-bottom:1px solid #E8E8E8">
                 <apex:outputPanel >
                 <span style="color:red; font-weight: bold">
                  <apex:outputField value="{!Agency__c.DQM_Lapse_Year_2_APE__c}"/>   
                 </span>  
                </apex:outputPanel>  
                                             
                </td>
                <td style="text-align:center;border-bottom:1px solid #E8E8E8">
                 <apex:outputPanel >
                 <span style="color:red; font-weight: bold">
                  <apex:outputField value="{!Agency__c.DQM_Lapse_Year_3_APE__c}"/>   
                 </span>  
                </apex:outputPanel>  
                                              
                </td>
                <td style="text-align:center;border-bottom:1px solid #E8E8E8">
                 <apex:outputPanel >
                 <span style="color:red; font-weight: bold">
                  <apex:outputField value="{!Agency__c.DQM_Lapse_Year_4_APE__c}"/>   
                 </span>  
                 </apex:outputPanel> 
                </td>    
                   
               <td style="width:150px;">
                &nbsp;               
               </td>                              
               </tr>
                <tr>
                <td style="text-align:right;border-bottom:1px solid #E8E8E8">
                <apex:outputLabel value="Lapse APE %" style="font-weight:bold;"/>
                </td>
                <td style="text-align:center;border-bottom:1px solid #E8E8E8">
                 <apex:outputPanel >
                 <span style="color:red; font-weight: bold">
                  <apex:outputField value="{!Agency__c.DQM_Lapse_Year_1_APE_Percent__c}"/>   
                 </span>  
                </apex:outputPanel>  
                                              
                </td>
                <td style="text-align:center;border-bottom:1px solid #E8E8E8">
                 <apex:outputPanel >
                 <span style="color:red; font-weight: bold">
                  <apex:outputField value="{!Agency__c.DQM_Lapse_Year_2_APE_Percent__c}"/>   
                 </span>  
                </apex:outputPanel> 
                    
                </td>
                <td style="text-align:center;border-bottom:1px solid #E8E8E8">
                 <apex:outputPanel >
                 <span style="color:red; font-weight: bold">
                  <apex:outputField value="{!Agency__c.DQM_Lapse_Year_3_APE_Percent__c}"/>   
                 </span>  
                </apex:outputPanel> 
                    
                </td>
                <td style="text-align:center;border-bottom:1px solid #E8E8E8">
                 <apex:outputPanel >
                 <span style="color:red; font-weight: bold">
                  <apex:outputField value="{!Agency__c.DQM_Lapse_Year_4_APE_Percent__c}"/>   
                 </span>  
                </apex:outputPanel> 
                    
                </td>     
               <td style="width:150px;">
                &nbsp;               
               </td>                             
               </tr>
                              <tr>
                <td style="text-align:right;border-bottom:1px solid #E8E8E8">
                <apex:outputLabel value="Lapse Count" style="font-weight:bold;"/>
                </td>
                <td style="text-align:center;border-bottom:1px solid #E8E8E8">
                 <apex:outputPanel >
                 <span style="color:red; font-weight: bold">
                  <apex:outputField value="{!Agency__c.DQM_Lapse_Year_1_Count__c}"/>   
                 </span>  
                </apex:outputPanel>  
                                            
                </td>
                <td style="text-align:center;border-bottom:1px solid #E8E8E8">
                 <apex:outputPanel >
                 <span style="color:red; font-weight: bold">
                  <apex:outputField value="{!Agency__c.DQM_Lapse_Year_2_Count__c}"/>   
                 </span>  
                </apex:outputPanel>    
                </td>
                                  
                <td style="text-align:center;border-bottom:1px solid #E8E8E8">
                 <apex:outputPanel >
                 <span style="color:red; font-weight: bold">
                  <apex:outputField value="{!Agency__c.DQM_Lapse_Year_3_Count__c}"/>   
                 </span>  
                </apex:outputPanel> 
                </td>
                                  
                <td style="text-align:center;border-bottom:1px solid #E8E8E8">
                 <apex:outputPanel >
                 <span style="color:red; font-weight: bold">
                  <apex:outputField value="{!Agency__c.DQM_Lapse_Year_4_Count__c}"/>   
                 </span>  
                </apex:outputPanel>   
                </td>     
                                  
               <td style="width:150px;">
                &nbsp;               
               </td>                             
               </tr>               
                              <tr>
                <td style="text-align:right;border-bottom:1px solid #E8E8E8">
                <apex:outputLabel value="Lapse Count %" style="font-weight:bold;"/>
                </td>
                <td style="text-align:center;border-bottom:1px solid #E8E8E8">
                 <apex:outputPanel >
                 <span style="color:red; font-weight: bold">
                  <apex:outputField value="{!Agency__c.DQM_Lapse_Year_1_Count_Percent__c}"/>   
                 </span>  
                </apex:outputPanel>                                
                </td>
                                  
                <td style="text-align:center;border-bottom:1px solid #E8E8E8">
                <apex:outputPanel >
                 <span style="color:red; font-weight: bold">
                  <apex:outputField value="{!Agency__c.DQM_Lapse_Year_2_Count_Percent__c}"/>   
                 </span>  
                </apex:outputPanel>                                
                </td>
                                  
                <td style="text-align:center;border-bottom:1px solid #E8E8E8">
                 <apex:outputPanel >
                 <span style="color:red; font-weight: bold">
                  <apex:outputField value="{!Agency__c.DQM_Lapse_Year_3_Count_Percent__c}"/>   
                 </span>  
                </apex:outputPanel>                               
                </td>
                                  
                <td style="text-align:center;border-bottom:1px solid #E8E8E8">
                 <apex:outputPanel >
                 <span style="color:red; font-weight: bold">
                  <apex:outputField value="{!Agency__c.DQM_Lapse_Year_4_Count_Percent__c}"/>   
                 </span>  
                </apex:outputPanel>   
                </td>     
                                  
               <td style="width:150px;">
                &nbsp;               
               </td>                             
               </tr>
              </table> 
           </html>   
           
            </apex:pageBlockSection>

 
            
            <!-------------- CYD --------------->
            
            <apex:pageBlockSection id="CYD" rendered="{!IF(pickchoice== 'CYD', true , false)}" >
                
            <apex:outputText label="Issued Count" value="{!Agency__c.DQM_CYD_Issued_Count__c}"/><br></br>
            <apex:outputText label="Returned Count" value="{!Agency__c.DQM_CYD_Returned_Count__c}"/>
            <apex:outputText label="Amended Count" value="{!Agency__c.DQM_CYD_Amended_Count__c}"/>
            <apex:outputText label="Returned Count %" value="{!Agency__c.DQM_CYD_Returned_Percent__c}"/>
            <apex:outputText label="Amended Count %" value="{!Agency__c.DQM_CYD_Amended_Percent__c}"/>

            </apex:pageBlockSection>
            
            <!-------------- ND --------------->
            
            <apex:pageBlockSection id="ND" rendered="{!if(pickchoice== 'ND',true,false)}">
			
            <apex:outputText label="Total Lives Count" value="{!Agency__c.DQM_ND_Total_Lives_Count__c}"/><br></br>
            <apex:outputText label="ND Lives Count" value="{!Agency__c.DQM_ND_Lives_Count__c}"/>
            <apex:outputText label="ND Rel Lives Count" value="{!Agency__c.DQM_ND_Relevant_Lives_Count__c}"/>
            <apex:outputText label="ND Lives %" value="{!Agency__c.DQM_ND_Lives_Percent__c}"/>
            <apex:outputText label="ND Rel Lives %" value="{!Agency__c.DQM_ND_Relevant_Lives_Percent__c}"/>            
            
            </apex:pageBlockSection>
            
                         
        </apex:pageBlockSection>
     </apex:pageBlock>
  </apex:form>
</apex:page>

 
William TranWilliam Tran
Why are you not using PageBlockTable?

What you want is a table format, why try to build it when it is already available.

thx.
Adam LeeAdam Lee
Each value is a separate field on its own and would like to display it in a Matrix format
Keyur  ModiKeyur Modi
Hi,
correct your VF page code with below code,
<!-------------- Lapse --------------->
  
            <apex:pageBlockSection columns="1" id="Lapse" rendered="{!IF(pickchoice== 'Lapse', true , false)}">
     <html>
                  
<table width="100%" cellspacing="0">
            <tr>
                <td style="width:150px;border-bottom:1px solid #E8E8E8">
                &nbsp;&nbsp;
                </td>
                <td style="font-weight:bold;text-align:center;border-bottom:1px solid #E8E8E8">
                
                   <p style="color:Black; font-weight: bold"> Year 1</p>
                                
                </td>
                
                <td style="font-weight:bold;text-align:center;border-bottom:1px solid #E8E8E8">
                
                   <p style="color:Black; font-weight: bold"> Year 2</p>
                                
                </td>
           
               <td style="font-weight:bold;text-align:center;border-bottom:1px solid #E8E8E8">
                
                   <p style="color:Black; font-weight: bold"> Year 3</p>
                                
                </td>
         
                <td style="font-weight:bold;text-align:center;border-bottom:1px solid #E8E8E8">
                
                   <p style="color:Black; font-weight: bold"> Year 4</p>
                                
                </td>
                
               <td style="width:150px;">
                &nbsp;               
               </td>           
               </tr>
    
    
               <tr>
                   
                <td style="text-align:right;border-bottom:1px solid #E8E8E8">
                <p styleclass="label" style="font-weight:bold;"> Lapse APE </p>
                </td>
                   
                <td style="text-align:center;border-bottom:1px solid #E8E8E8">
                
                 <p style="color:red; font-weight: bold">
                  {!Agency__c.DQM_Lapse_Year_1_APE__c} </p>   
                
                              
                </td>
                <td style="text-align:center;border-bottom:1px solid #E8E8E8">
               <p style="color:red; font-weight: bold">
                 {!Agency__c.DQM_Lapse_Year_2_APE__c} </p>
             
                                             
                </td>

See as change copule of the <td> which was highlighted with bold letter, same way you need to change all <td> same as above code . Hope this will help you.

Thanks,
Keyur Modi
This was selected as the best answer
Adam LeeAdam Lee
Thank you so much!

Quick one, how do I reformat a number to currency?
Keyur  ModiKeyur Modi
Hi you can try this 
<apex:outputText value="{0, number, 000,000.00}">
       <apex:param value="{!Account.AnnualRevenue}" />
 </apex:outputText>

please let me know if this will help,

Thanks,
Keyur Modi
Adam LeeAdam Lee
I’ve tried that and it messed up the screen again.
Keyur  ModiKeyur Modi
Hi,
if you are trying to use that one inside the <td> then remove <span> and <output panel> and then just try with the above mention code. it will work as per your requirment.

please let me know if this will help,

Thansk,
Keyur Modi