function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Jennifer PratherJennifer Prather 

Styling a Visualforce PDF page

I am having difficulty styling the PDF tp make it more readable for users. I was trying to create each section in the table format. Does anyone have any suggestions on how to do that? 
<apex:page standardController="Committee_Applicant__c" renderAs="pdf">
    <head>
    </head>
    <body>
    <center>
    	<h1>
        	TVC
   	</h1>
    	<h3>
            Application
        </h3>
    </center>
    <h4>
        Part 1: Applicant's Section
    </h4>
    <table>
        <tr>
            <th>Applicant's Name:</th>
            <td><apex:outputText value="{!Committee_Applicant__c.Applicants_Name__c}"/></td>
        </tr>
        <tr>
            <th>Home Address:</th>
            <td><apex:outputText value="{!Committee_Applicant__c.Home_Address__c}"/></td>
        </tr>
        <tr>
            <th>City:</th>
            <td><apex:outputText value="{!Committee_Applicant__c.Home_City__c}"/></td>
            <th>State:</th>
            <td><apex:outputText value="{!Committee_Applicant__c.Home_State__c}"/></td>
            <th>ZIP Code + 4:</th>
            <td><apex:outputText value="{!Committee_Applicant__c.Home_ZIP_Code__c}"/></td>
        </tr>
    </table>
    <h4>
        Part 2: Business Section
    </h4>
    <table>
        <tr>
            <th>Applicant's Job Title/Company:</th>
            <td><apex:outputText value="{!Committee_Applicant__c.Applicants_Job_Title_Company__c}"/></td>
        </tr>
        <tr>
            <th>Main Responsibilities:</th>
            <td><apex:outputText value="{!Committee_Applicant__c.Main_Responsibilities__c}"/></td>
        </tr>
        <tr>
            <th>Work Address:</th>
            <td><apex:outputText value="{!Committee_Applicant__c.Work_Address__c}"/></td>
        </tr>
        <tr>
            <th>City:</th>
            <td><apex:outputText value="{!Committee_Applicant__c.Work_City__c}"/></td>
            <th>State:</th>
            <td><apex:outputText value="{!Committee_Applicant__c.Work_State__c}"/></td>
            <th>ZIP Code + 4:</th>
            <td><apex:outputText value="{!Committee_Applicant__c.Work_ZIP_Code__c}"/></td>
        </tr>
        <tr>
            <th>Work Email:</th>
            <td><apex:outputText value="{!Committee_Applicant__c.Work_Email__c}"/></td>
            <th>Work Phone Number:</th>
            <td><apex:outputText value="{!Committee_Applicant__c.Work_Phone_Number__c}"/></td>
        </tr>
    </table>
    <h4>
        Part 3: Committee Selection Section
    </h4>
   	
        <b><p>
            Select the committee for which you are applying for membership:
        </p></b>
    
    <table>
        <tr>
            <th>Veterans Employment and Training Advisory Committee:</th>
            <td><apex:outputText value="{!Committee_Applicant__c.VET_Advisory_Committee__c}"/></td>
            <th>Preference:</th>
            <td><apex:outputText value="{!Committee_Applicant__c.VET_Preference__c}"/></td>
        </tr>
        <tr>
            <th>Fund for Veterans' Assistance Advisory Committee:</th>
            <td><apex:outputText value="{!Committee_Applicant__c.FVA_Advisory_Committee__c}"/></td>
            <th>Preference:</th>
            <td><apex:outputText value="{!Committee_Applicant__c.FVA_Preference__c}"/></td>
        </tr>
        <tr>
            <th>Veterans County Service Officer Advisory Committee:</th>
            <td><apex:outputText value="{!Committee_Applicant__c.VCSO_Advisory_Committee__c}"/></td>
            <th>Preference:</th>
            <td><apex:outputText value="{!Committee_Applicant__c.VCSO_Preference__c}"/></td>
        </tr>
    </table>
    <br/>
    <table>
         <tr>
             <th>Provide any additional information that you would like the selection committee to consider:</th> 
         </tr>
         <tr>
             <td><apex:outputText value="{!Committee_Applicant__c.Additional_Information__c}"/></td>
        </tr>
    </table>
    <br/>
    <table>
         <tr>
             <th>Briefly tell us why you would like to serve on the selected committees.</th> 
         </tr>
         <tr>
             <td><apex:outputText value="{!Committee_Applicant__c.Why_Serve__c}"/></td>
        </tr>
    </table>
    <br/>
    <table>
         <tr>
             <th>Briefly explain your experience with the Open Meetings Act (if applicable).</th> 
         </tr>
         <tr>
             <td><apex:outputText value="{!Committee_Applicant__c.Open_Meetings_Act__c}"/></td>
        </tr>
    </table>
    </body>
</apex:page>

 
ANUTEJANUTEJ (Salesforce Developers) 
Hi Jennifer,

Have you checked all the considerations that needs to be taken into account while implementing this scenario, please find the link for reference below:

>> https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_output_pdf_considerations.htm

I hope this helps and in case if this comes in handy can you please choose this as the best answer so that it can be used by others in the future.

Regards,
Anutej
Alain CabonAlain Cabon
Here are some tricks with renderAs="pdf" for tables.

http://webtricksandtreats.com/table-style-css/
 
  1. renderAs="advanced_pdf" (pilot) : just use renderAs="pdf" (it is the same)
  2. table.table-style-three tr:nth-child(even) td : works without renderAs="pdf" (VFP only) but not for the PDF.

<apex:page renderAs="advanced_pdf" showHeader="false" sidebar="false" standardStylesheets="false" applyBodyTag="false" applyHtmlTag="false"> 
    <html> 
        <head> 
            <style> 
                @media print { body {-webkit-print-color-adjust: exact;} }
                @page { size: letter; margin: 25mm; @top-center { content: "Sample"; } 
                @bottom-center { content: "Page " counter(page) " of " counter(pages); } }
                .page-break { display:block; page-break-after:always; } 
                body { font-family: Arial Unicode MS; } 
                table {
                table-layout: fixed;
                width:100%;
                border-collapse: collapse;
                border-spacing: 0; 
                }
                table.table-style-two {
                font-family: verdana, arial, sans-serif;
                font-size: 11px;
                color: #333333;
                border-width: 1px;
                border-color: #3A3A3A;
                border-collapse: collapse;
                }
                
                table.table-style-two th {
                border-width: 1px;
                padding: 8px;
                border-style: solid;
                border-color: #517994;
                background-color: #B2CFD8;
                }
                
                table.table-style-two tr:hover td {
                background-color: #DFEBF1;
                }
                
                table.table-style-two td {
                border-width: 1px;
                padding: 8px;
                border-style: solid;
                border-color: #517994;
                background-color: #ffffff;
                }
                
                table.table-style-three {
                font-family: verdana, arial, sans-serif;
                font-size: 11px;
                color: #333333;
                border-width: 1px;
                border-color: #3A3A3A;
                border-collapse: collapse;
                }
                table.table-style-three th {
                border-width: 1px;
                padding: 8px;
                border-style: solid;
                border-color: #FFA6A6;
                background-color: #D56A6A;
                color: #ffffff;
                }
                table.table-style-three tr:hover td {
                cursor: pointer;
                }
                table.table-style-three tr:nth-child(even) td{
                background-color: #F7CFCF;
                }
                table.table-style-three td {
                border-width: 1px;
                padding: 8px;
                border-style: solid;
                border-color: #FFA6A6;
                background-color: #ffffff;
                }
            </style> 
        </head>
        <body>    
            <table class="table-style-three">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>235312</td>
                        <td>John</td>
                        <td>Doe</td>
                    </tr>
                    <tr>
                        <td>453123</td>
                        <td>Mark</td>
                        <td>Jones</td>
                    </tr>
                    <tr>
                        <td>998332</td>
                        <td>Jonathan</td>
                        <td>Smith</td>
                    </tr>
                    <tr>
                        <td>345612</td>
                        <td>Andrew</td>
                        <td>McArthur</td>
                    </tr>
                    <tr>
                        <td>453123</td>
                        <td>Adam</td>
                        <td>Fuller</td>
                    </tr>
                    <tr>
                        <td>998332</td>
                        <td>Tyler</td>
                        <td>Watt</td>
                    </tr>
                </tbody>
            </table>
            <center>
                <h1>
                    TVC
                </h1>
                <h3>
                    Application
                </h3>
            </center>
            <h4>
                Part 1: Applicant's Section
            </h4>
            <table class="table-style-three">
                <tbody>
                    
                    <tr>
                        <th>Applicant's Name:</th>
                        <td><apex:outputText value="Applicants Name"/></td>
                    </tr>
                    <tr>
                        <th>Home Address:</th>
                        <td><apex:outputText value="Home Address"/></td>
                    </tr>
                    <tr>
                        <th>City:</th>
                        <td><apex:outputText value="Home City"/></td>
                        <th>State:</th>
                        <td><apex:outputText value="Home State"/></td>
                        <th>ZIP Code + 4:</th>
                        <td><apex:outputText value="Home ZIP Code"/></td>
                    </tr>
                </tbody>     
            </table>
            
            <div class="page-break"></div>
            
            <h4>
                Part 2: Business Section
            </h4>
            <table class="table-style-two">
                <tr>
                    <th>Applicant's Job Title/Company:</th>
                    <td><apex:outputText value="Applicants Job Title Company"/></td>
                </tr>
                <tr>
                    <th>Main Responsibilities:</th>
                    <td><apex:outputText value="Main Responsibilities"/></td>
                </tr>
                <tr>
                    <th>Work Address:</th>
                    <td><apex:outputText value="Work Address"/></td>
                </tr>
                <tr>
                    <th>City:</th>
                    <td><apex:outputText value="Work City"/></td>
                    <th>State:</th>
                    <td><apex:outputText value="Work State"/></td>
                    <th>ZIP Code + 4:</th>
                    <td><apex:outputText value="Work ZIP Code"/></td>
                </tr>
                <tr>
                    <th>Work Email:</th>
                    <td><apex:outputText value="Work Email"/></td>
                    <th>Work Phone Number:</th>
                    <td><apex:outputText value="Work Phone Number"/></td>
                </tr>
            </table>
            
            <div class="page-break"></div>
            
            <h4>
                Part 3: Committee Selection Section
            </h4>            
            <b><p>
                Select the committee for which you are applying for membership:
                </p></b>
            
            <table class="table-style-two">
                <tr>
                    <th>Veterans Employment and Training Advisory Committee:</th>
                    <td><apex:outputText value="VET Advisory Committee"/></td>
                    <th>Preference:</th>
                    <td><apex:outputText value="VET Preference"/></td>
                </tr>
                <tr>
                    <th>Fund for Veterans' Assistance Advisory Committee:</th>
                    <td><apex:outputText value="FVA Advisory Committee"/></td>
                    <th>Preference:</th>
                    <td><apex:outputText value="FVA Preference"/></td>
                </tr>
                <tr>
                    <th>Veterans County Service Officer Advisory Committee:</th>
                    <td><apex:outputText value="VCSO Advisory Committee"/></td>
                    <th>Preference:</th>
                    <td><apex:outputText value="VCSO Preference"/></td>
                </tr>
            </table>
            <br/>
            <table class="table-style-two">
                <tr>
                    <th>Provide any additional information that you would like the selection committee to consider:</th> 
                </tr>
                <tr>
                    <td><apex:outputText value="Additional Information"/></td>
                </tr>
            </table>
            <br/>
            <table class="table-style-two">
                <tr>
                    <th>Briefly tell us why you would like to serve on the selected committees.</th> 
                </tr>
                <tr>
                    <td><apex:outputText value="Why Serve"/></td>
                </tr>
            </table>
            <br/>
            <table class="table-style-two">
                <tr>
                    <th>Briefly explain your experience with the Open Meetings Act (if applicable).</th> 
                </tr>
                <tr>
                    <td><apex:outputText value="Open Meetings Act"/></td>
                </tr>
            </table>
        </body>      
    </html>

 
Jennifer PratherJennifer Prather
Thank you for the responses. I am wondering if there is a way to make the tables look like this? User-added image
 
Alain CabonAlain Cabon

https://www.w3schools.com/tags/att_td_colspan.asp