Don't have an account?

Browse by Topic

+ Start a Discussion

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

July 23, 2015
·
Like
0
·
Follow
2

Best Answer chosen by Adam Lee

Keyur Modi
Hi,
correct your VF page code with below code,
 <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">    </td> <td style="font-weight:bold;text-align:center;border-bottom:1px solid #E8E8E8"> Year 1 </td> <td style="font-weight:bold;text-align:center;border-bottom:1px solid #E8E8E8"> Year 2 </td> <td style="font-weight:bold;text-align:center;border-bottom:1px solid #E8E8E8"> Year 3 </td> <td style="font-weight:bold;text-align:center;border-bottom:1px solid #E8E8E8"> Year 4 </td> <td style="width:150px;">   </td> </tr> <tr> <td style="text-align:right;border-bottom:1px solid #E8E8E8"> Lapse APE </td> <td style="text-align:center;border-bottom:1px solid #E8E8E8"> {!Agency__c.DQM_Lapse_Year_1_APE__c} </td> <td style="text-align:center;border-bottom:1px solid #E8E8E8"> {!Agency__c.DQM_Lapse_Year_2_APE__c} </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

July 23, 2015
·
Like
0
·
Dislike
0

Keyur 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

July 23, 2015
·
Like
0
·
Dislike
0

Adam Lee
<apex:page standardcontroller="Agency__c" extensions="dqmExt"> <apex:form > <apex:selectList value="{!pickchoice}" multiselect="false" size="1"> Please select a metric   <apex:selectOptions value="{!items}"/> <apex:actionSupport event="onchange" rerender="DQM"/> </apex:selectList>   Last Updated:   <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">  <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>  <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>  <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">    </td> <td style="font-weight:bold;text-align:center;border-bottom:1px solid #E8E8E8"> <apex:outputPanel > <apex:outputLabel value="Year 1"/> </apex:outputPanel> </td> <td style="font-weight:bold;text-align:center;border-bottom:1px solid #E8E8E8"> <apex:outputPanel > <apex:outputLabel value="Year 2"/> </apex:outputPanel> </td> <td style="font-weight:bold;text-align:center;border-bottom:1px solid #E8E8E8"> <apex:outputPanel > <apex:outputLabel value="Year 3"/> </apex:outputPanel> </td> <td style="font-weight:bold;text-align:center;border-bottom:1px solid #E8E8E8"> <apex:outputPanel > <apex:outputLabel value="Year 4"/> </apex:outputPanel> </td> <td style="width:150px;">   </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 > <apex:outputField value="{!Agency__c.DQM_Lapse_Year_1_APE__c}"/> </apex:outputPanel> </td> <td style="text-align:center;border-bottom:1px solid #E8E8E8"> <apex:outputPanel > <apex:outputField value="{!Agency__c.DQM_Lapse_Year_2_APE__c}"/> </apex:outputPanel> </td> <td style="text-align:center;border-bottom:1px solid #E8E8E8"> <apex:outputPanel > <apex:outputField value="{!Agency__c.DQM_Lapse_Year_3_APE__c}"/> </apex:outputPanel> </td> <td style="text-align:center;border-bottom:1px solid #E8E8E8"> <apex:outputPanel > <apex:outputField value="{!Agency__c.DQM_Lapse_Year_4_APE__c}"/> </apex:outputPanel> </td> <td style="width:150px;">   </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 > <apex:outputField value="{!Agency__c.DQM_Lapse_Year_1_APE_Percent__c}"/> </apex:outputPanel> </td> <td style="text-align:center;border-bottom:1px solid #E8E8E8"> <apex:outputPanel > <apex:outputField value="{!Agency__c.DQM_Lapse_Year_2_APE_Percent__c}"/> </apex:outputPanel> </td> <td style="text-align:center;border-bottom:1px solid #E8E8E8"> <apex:outputPanel > <apex:outputField value="{!Agency__c.DQM_Lapse_Year_3_APE_Percent__c}"/> </apex:outputPanel> </td> <td style="text-align:center;border-bottom:1px solid #E8E8E8"> <apex:outputPanel > <apex:outputField value="{!Agency__c.DQM_Lapse_Year_4_APE_Percent__c}"/> </apex:outputPanel> </td> <td style="width:150px;">   </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 > <apex:outputField value="{!Agency__c.DQM_Lapse_Year_1_Count__c}"/> </apex:outputPanel> </td> <td style="text-align:center;border-bottom:1px solid #E8E8E8"> <apex:outputPanel > <apex:outputField value="{!Agency__c.DQM_Lapse_Year_2_Count__c}"/> </apex:outputPanel> </td> <td style="text-align:center;border-bottom:1px solid #E8E8E8"> <apex:outputPanel > <apex:outputField value="{!Agency__c.DQM_Lapse_Year_3_Count__c}"/> </apex:outputPanel> </td> <td style="text-align:center;border-bottom:1px solid #E8E8E8"> <apex:outputPanel > <apex:outputField value="{!Agency__c.DQM_Lapse_Year_4_Count__c}"/> </apex:outputPanel> </td> <td style="width:150px;">   </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 > <apex:outputField value="{!Agency__c.DQM_Lapse_Year_1_Count_Percent__c}"/> </apex:outputPanel> </td> <td style="text-align:center;border-bottom:1px solid #E8E8E8"> <apex:outputPanel > <apex:outputField value="{!Agency__c.DQM_Lapse_Year_2_Count_Percent__c}"/> </apex:outputPanel> </td> <td style="text-align:center;border-bottom:1px solid #E8E8E8"> <apex:outputPanel > <apex:outputField value="{!Agency__c.DQM_Lapse_Year_3_Count_Percent__c}"/> </apex:outputPanel> </td> <td style="text-align:center;border-bottom:1px solid #E8E8E8"> <apex:outputPanel > <apex:outputField value="{!Agency__c.DQM_Lapse_Year_4_Count_Percent__c}"/> </apex:outputPanel> </td> <td style="width:150px;">   </td> </tr> </table> </html> </apex:pageBlockSection>  <apex:pageBlockSection id="CYD" rendered="{!IF(pickchoice== 'CYD', true , false)}" > <apex:outputText label="Issued Count" value="{!Agency__c.DQM_CYD_Issued_Count__c}"/> <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>  <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}"/> <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>

July 23, 2015
·
Like
0
·
Dislike
0

Adam Lee
Its the 'Lapse' part

July 23, 2015
·
Like
0
·
Dislike
0

Keyur Modi
Hi,
I tried a part of your code in my instance and i found this solution

<apex:page >  <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">    </td> <td style="font-weight:bold;text-align:center;border-bottom:1px solid #E8E8E8"> Year 1 </td> <td style="font-weight:bold;text-align:center;border-bottom:1px solid #E8E8E8"> Year 2 </td> <td style="font-weight:bold;text-align:center;border-bottom:1px solid #E8E8E8"> Year 3 </td> <td style="font-weight:bold;text-align:center;border-bottom:1px solid #E8E8E8"> Year 4 </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 

please let me know if this will help,

Thanks,
Keyur Modi

July 23, 2015
·
Like
0
·
Dislike
0

Adam Lee
Thanks but the format is still all over the place

July 23, 2015
·
Like
0
·
Dislike
0

Keyur 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

July 23, 2015
·
Like
0
·
Dislike
0

Adam Lee

<apex:page standardcontroller="Agency__c" extensions="dqmExt"> <apex:form > <apex:selectList value="{!pickchoice}" multiselect="false" size="1"> Please select a metric   <apex:selectOptions value="{!items}"/> <apex:actionSupport event="onchange" rerender="DQM"/> </apex:selectList>   Last Updated:   <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">  <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>  <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>  <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">    </td> <td style="font-weight:bold;text-align:center;border-bottom:1px solid #E8E8E8"> Year 1 </td> <td style="font-weight:bold;text-align:center;border-bottom:1px solid #E8E8E8"> Year 2 </td> <td style="font-weight:bold;text-align:center;border-bottom:1px solid #E8E8E8"> Year 3 </td> <td style="font-weight:bold;text-align:center;border-bottom:1px solid #E8E8E8"> Year 4 </td> <td style="width:150px;">   </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 > <apex:outputField value="{!Agency__c.DQM_Lapse_Year_1_APE__c}"/> </apex:outputPanel> </td> <td style="text-align:center;border-bottom:1px solid #E8E8E8"> <apex:outputPanel > <apex:outputField value="{!Agency__c.DQM_Lapse_Year_2_APE__c}"/> </apex:outputPanel> </td> <td style="text-align:center;border-bottom:1px solid #E8E8E8"> <apex:outputPanel > <apex:outputField value="{!Agency__c.DQM_Lapse_Year_3_APE__c}"/> </apex:outputPanel> </td> <td style="text-align:center;border-bottom:1px solid #E8E8E8"> <apex:outputPanel > <apex:outputField value="{!Agency__c.DQM_Lapse_Year_4_APE__c}"/> </apex:outputPanel> </td> <td style="width:150px;">   </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 > <apex:outputField value="{!Agency__c.DQM_Lapse_Year_1_APE_Percent__c}"/> </apex:outputPanel> </td> <td style="text-align:center;border-bottom:1px solid #E8E8E8"> <apex:outputPanel > <apex:outputField value="{!Agency__c.DQM_Lapse_Year_2_APE_Percent__c}"/> </apex:outputPanel> </td> <td style="text-align:center;border-bottom:1px solid #E8E8E8"> <apex:outputPanel > <apex:outputField value="{!Agency__c.DQM_Lapse_Year_3_APE_Percent__c}"/> </apex:outputPanel> </td> <td style="text-align:center;border-bottom:1px solid #E8E8E8"> <apex:outputPanel > <apex:outputField value="{!Agency__c.DQM_Lapse_Year_4_APE_Percent__c}"/> </apex:outputPanel> </td> <td style="width:150px;">   </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 > <apex:outputField value="{!Agency__c.DQM_Lapse_Year_1_Count__c}"/> </apex:outputPanel> </td> <td style="text-align:center;border-bottom:1px solid #E8E8E8"> <apex:outputPanel > <apex:outputField value="{!Agency__c.DQM_Lapse_Year_2_Count__c}"/> </apex:outputPanel> </td> <td style="text-align:center;border-bottom:1px solid #E8E8E8"> <apex:outputPanel > <apex:outputField value="{!Agency__c.DQM_Lapse_Year_3_Count__c}"/> </apex:outputPanel> </td> <td style="text-align:center;border-bottom:1px solid #E8E8E8"> <apex:outputPanel > <apex:outputField value="{!Agency__c.DQM_Lapse_Year_4_Count__c}"/> </apex:outputPanel> </td> <td style="width:150px;">   </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 > <apex:outputField value="{!Agency__c.DQM_Lapse_Year_1_Count_Percent__c}"/> </apex:outputPanel> </td> <td style="text-align:center;border-bottom:1px solid #E8E8E8"> <apex:outputPanel > <apex:outputField value="{!Agency__c.DQM_Lapse_Year_2_Count_Percent__c}"/> </apex:outputPanel> </td> <td style="text-align:center;border-bottom:1px solid #E8E8E8"> <apex:outputPanel > <apex:outputField value="{!Agency__c.DQM_Lapse_Year_3_Count_Percent__c}"/> </apex:outputPanel> </td> <td style="text-align:center;border-bottom:1px solid #E8E8E8"> <apex:outputPanel > <apex:outputField value="{!Agency__c.DQM_Lapse_Year_4_Count_Percent__c}"/> </apex:outputPanel> </td> <td style="width:150px;">   </td> </tr> </table> </html> </apex:pageBlockSection>  <apex:pageBlockSection id="CYD" rendered="{!IF(pickchoice== 'CYD', true , false)}" > <apex:outputText label="Issued Count" value="{!Agency__c.DQM_CYD_Issued_Count__c}"/> <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>  <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}"/> <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>

July 23, 2015
·
Like
0
·
Dislike
0

William 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.

July 23, 2015
·
Like
0
·
Dislike
0

Adam Lee
Each value is a separate field on its own and would like to display it in a Matrix format

July 23, 2015
·
Like
0
·
Dislike
0

This was selected as the best answer

Adam Lee
Thank you so much!

Quick one, how do I reformat a number to currency?

July 23, 2015
·
Like
0
·
Dislike
0

Keyur 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

July 23, 2015
·
Like
0
·
Dislike
0

Adam Lee
I’ve tried that and it messed up the screen again.

July 23, 2015
·
Like
0
·
Dislike
0

Keyur Modi
Hi,
if you are trying to use that one inside the <td> then remove 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

July 23, 2015
·
Like
0
·
Dislike
0

You need to sign in to do that.

Need an account? Sign Up

Have an account? Sign In

Dismiss

Browse by Topic

Welcome to Support!

Show

sorted by

HTML Table in PageBlockSection

All Answers

You need to sign in to do that.