+ Start a Discussion
ArmanMArmanM 

Align text issue

Hi, 

How can I align the following to the left of the page, its a pdf. Screenshot of the issue
I want to shift all the text to the left with this formet, here is the section of code for this- 
<tr>
                <td colspan="4"> </td>
            </tr>
            <tr>
                <td colspan="4" style="font-weight: bold; border-bottom-style: solid; border-bottom-width: thick;
                    border-bottom-color: #30b55a;">
                    Campaign Information </td>
            </tr>
              
                    <tr>
                            <td style="color: #808080; border-right-style: solid; border-right-width: thin;
                                border-right-color: #30b55a;">
                                Campaign Name </td>
                            <td align="left">
                                {!Opportunity.Name} </td>
                        </tr>
                    <tr>                    
                            <td align="right" style="color: #808080; border-right-style: solid; border-right-width: thin;
                                border-right-color: #30b55a;">
                                Brand </td>
                            <td style="text-align:left">
                                {!Opportunity.Account.Name} </td>
                        </tr>
                       
            <tr>
                <td align="right" style="color: #808080; border-right-style: solid; border-right-width: thin;
                    border-right-color: #30b55a;">
                    Start Date
                </td>
                    <td style="font-weight: normal">
                        <apex:outputText value="{0,date,MM'/'dd'/'yyyy}">
                        <apex:param value="{!Opportunity.Campaign_Start_Date__c}" /> 
                        </apex:outputText>
                    </td>
            </tr>
            
            <tr>
                <td align="right" style="color: #808080; border-right-style: solid; border-right-width: thin;
                    border-right-color: #30b55a;">
                    End Date
                </td>
                    <td style="font-weight: normal">
                        <apex:outputText value="{0,date,MM'/'dd'/'yyyy}">
                            <apex:param value="{!Opportunity.Campaign_End_Date__c}" /> 
                        </apex:outputText>
                    </td>
            </tr>
            
             <tr>
                <td align="right" style="color: #808080; border-right-style: solid; border-right-width: thin;
                    border-right-color: #30b55a;">
                    Duration 
                </td>
                    <td style="font-weight: normal">
                        <apex:outputText value="{0,number,0}">
                            <apex:param value="{!Opportunity.Campaign_Duration__c}"/>
                        </apex:outputText> 
                    </td>
            </tr>

Please help out. Thank you !
Best Answer chosen by ArmanM
pconpcon
I will start by saying that doing this all with tables is a terrible way to do this.  You should be doing it with a comination of divs, headers and tables depending on the type of data you're trying to display.  For example, your "Web Spots" should be header tag and then below it should be a table.  Also, you should use apex:outputPanel with a layout of none and the render tag to show or hide the sections.  For example
 
<apex:page standardController="Campaign" renderAs="pdf" applyBodyTag="false" applyHtmlTag="false" showHeader="false">
    <html>
        <head>
            <style>
                .header {
                    border-bottom-style: solid;
                    border-bottom-width: thick;
                    border-bottom-color: #30b55a;
                }
                
                .header h1 {
                	font-size: 12pt;
                	margin-bottom: 2px;
                }
                
                table, table tr, table tr td {
                	border: none;
                	border-collapse: collapse;
                }
                
                table tr td {
                	padding: 2px;
                }
                
                .desc {
                    color: #808080;
                    border-right-style: solid;
                    border-right-width: thin;
                    border-right-color: #30b55a;
                	padding-right: 10px;
                }
                
                .value {
                	padding-left: 10px;
                }
            </style>
        </head>
        <body>
            <apex:outputPanel layout="none" rendered="{!NOT(ISBLANK(Campaign.Name))}">
                <div class="header"><h1>Campaign Information</h1></div>
                <table>
                    <tr>
                        <td class="desc">Campaign Name</td>
                        <td class="value">{!Campaign.Name}</td>
                    </tr>
                    <tr>
                        <td class="desc">Brand</td>
                        <td class="value">{!Campaign.Owner.Name}</td>
                    </tr>
                    <tr>
                        <td class="desc">Start Date</td>
                        <td class="value">
                            <apex:outputText value="{0,date,MM'/'dd'/'yyyy}">
                                <apex:param value="{!Campaign.StartDate}" /> 
                            </apex:outputText>
                        </td>
                    </tr>
                    <tr>
                        <td class="desc">End Date</td>
                        <td class="value">
                            <apex:outputText value="{0,date,MM'/'dd'/'yyyy}">
                                <apex:param value="{!Campaign.EndDate}" /> 
                            </apex:outputText>
                        </td>
                    </tr>
                </table>
            </apex:outputPanel>
        </body>
    </html>
</apex:page>

I would also recommend reviewing field sets [1] and they may help simplify your code.

[1] http://blog.deadlypenguin.com/blog/2016/04/25/field-sets-dynamic-visualforce/
 

All Answers

pconpcon
You have in your td align="right" have you tried simply removing those?  That should force your text to align to the left.
ArmanMArmanM
Tried that but still nothing 
pconpcon
Using the following code, I get

User-added image
So switching it to align="left" works for me
 
<apex:page standardController="Campaign" renderAs="pdf">
    <table>
        <tr>
            <td colspan="4"></td>
        </tr>
        <tr>
            <td colspan="4" style="font-weight: bold; border-bottom-style: solid; border-bottom-width: thick; border-bottom-color: #30b55a;">Campaign Information</td>
        </tr>
        <tr>
            <td style="color: #808080; border-right-style: solid; border-right-width: thin; border-right-color: #30b55a;">Campaign Name</td>
            <td align="left">{!Campaign.Name}</td>
        </tr>
        <tr>                    
            <td align="left" style="color: #808080; border-right-style: solid; border-right-width: thin; border-right-color: #30b55a;">Brand</td>
            <td style="text-align:left">{!Campaign.Owner.Name}</td>
        </tr>
        <tr>
            <td align="left" style="color: #808080; border-right-style: solid; border-right-width: thin; border-right-color: #30b55a;">Start Date</td>
            <td style="font-weight: normal">
                <apex:outputText value="{0,date,MM'/'dd'/'yyyy}">
                    <apex:param value="{!Campaign.StartDate}" /> 
                </apex:outputText>
            </td>
        </tr>
        <tr>
            <td align="left" style="color: #808080; border-right-style: solid; border-right-width: thin; border-right-color: #30b55a;">End Date</td>
            <td style="font-weight: normal">
                <apex:outputText value="{0,date,MM'/'dd'/'yyyy}">
                    <apex:param value="{!Campaign.EndDate}" /> 
                </apex:outputText>
            </td>
        </tr>
    </table>
</apex:page>

There may be some other CSS that is affecting your tables.  Can you provide the entire page?  Personally I don't think it's anything but the align="left".  If you look at your "Campaign Name" field, it's aligned to the left and it is missing the align attribute on your td.   When the attribute is missing, it defaults to left.
ArmanMArmanM
Okay so I modified some stuff but now I'm having two issues if you see the 'Web Spots - ##' section you can see that that is not getting aligned. Also if you look at the entire code, I also have text following the tables of value. So I text starting from "Confidentiality:" to be always starting from a second new page and not cgange/move with the entire frame. 

User-added image
<apex:page standardController="Opportunity" renderAs="pdf" applyBodyTag="false" > 
    <html> 
        <apex:form >
        <apex:pageBlock >
        <center>
         <table width="100%" style="font-family: Arial, Helvetica, sans-serif; border-collapse: collapse;" cellpadding="5">
        
        <head>
       
            <tr>
                <td colspan="4" >
                    <img src="some img" ></img> 
                </td>
            </tr> 
        </head>
       
        <body>
           
            <tr>
                <td colspan="4" style="font-size: x-large; font-weight: bold">
                    {!Opportunity.Account.Name}
                </td>
            </tr>
          
            <tr>
                <td colspan="4"> </td>
            </tr>
            <tr>
                <td colspan="4" style="font-weight: bold; border-bottom-style: solid; border-bottom-width: thick;
                    border-bottom-color: #30b55a;">
                    Campaign Information </td>
            </tr>
              
                    <tr>
                            <td align="left" style="color: #808080; border-right-style: solid; border-right-width: thin;
                    border-right-color: #30b55a;">
                                Campaign Name </td>
                            <td align="left" style="padding-left: 5px;"> 
                                {!Opportunity.Name} </td>
                                
                        </tr>
                   <tr>                    
                            <td align="left" style="color: #808080;border-right-style: solid; border-right-width: thin;
                    border-right-color: #30b55a;">
                                Brand </td>
                            <td align="left" style="padding-left: 5px;">
                                {!Opportunity.Account.Name} </td>
                        </tr>
                       
            <tr>
                <td align="left" style="color: #808080; border-right-style: solid; border-right-width: thin;
                    border-right-color: #30b55a;">
                    Start Date
                </td>
                    <td style="font-weight: normal; padding-left: 5px;">
                        <apex:outputText value="{0,date,MM'/'dd'/'yyyy}">
                        <apex:param value="{!Opportunity.Campaign_Start_Date__c}" /> 
                        </apex:outputText>
                    </td>
            </tr>
            
            <tr>
                <td align="left" style="color: #808080; border-right-style: solid; border-right-width: thin;
                    border-right-color: #30b55a;">
                    End Date
                </td>
                    <td style="font-weight: normal; padding-left: 5px;">
                        <apex:outputText value="{0,date,MM'/'dd'/'yyyy}">
                            <apex:param value="{!Opportunity.Campaign_End_Date__c}" /> 
                        </apex:outputText>
                    </td>
            </tr>
            
           
             <tr>
                <td align="left" style="color: #808080; border-right-style: solid; border-right-width: thin;
                    border-right-color: #30b55a;">
                    Duration 
                </td>
                    <td style="font-weight: normal; padding-left: 5px;">
                        <apex:outputText value="{0,number, }">
                            <apex:param value="{!Opportunity.Campaign_Duration__c}"/>
                        </apex:outputText> 
                    </td>
            </tr>
            <tr>
                <td align="left" style="color: #808080; border-right-style: solid; border-right-width: thin;
                    border-right-color: #30b55a;">
                    Geo
                </td>
                    <td style="font-weight: normal; padding-left: 5px;">
                        {!Opportunity.Targeting_Country__c} 
                    </td> 
            </tr>
            
             <tr>
                <td colspan="4">
                    &nbsp;
                </td>
            </tr>
            
        <tr>    
            <td colspan="4" style="font-weight: bold; border-bottom-style: solid; border-bottom-width: thick;
                border-bottom-color: #30b55a;">
                Mobile Spots -
                
                <apex:outputText value="{0,number,000,000}">
                    <apex:param value="{!Opportunity.Mobile_Spots_B__c}"/>
                </apex:outputText> 
            </td>
        </tr>
        <tr>
                <td align="left" style="color: #808080; border-right-style: solid; border-right-width: thin;
                    border-right-color: #30b55a;">
                    Audio Ads 
                </td>
                    <td style="font-weight: normal; padding-left: 5px;">
                        <apex:outputText value="{0, number, }">
                            <apex:param value="{!Opportunity.Mobile_Spots_B__c}"/>
                        </apex:outputText>
                    </td>
        </tr>
        <tr>
             <td width="160px" align="left" style="color: #808080; border-right-style: solid; border-right-width: thin;
                border-right-color: #30b55a;">
                Companion Banner
             </td>
                <td style="font-weight: normal; padding-left: 5px;">
                <apex:outputText value="{0, number, }">
                    <apex:param value="{!Opportunity.Mobile_Companion_Banner__c}"/>
                </apex:outputText>                    
                </td>
        </tr>
        <tr>
            <td align="left" style="color: #808080; border-right-style: solid; border-right-width: thin;
                border-right-color: #30b55a;">
                Display Impression
            </td>
            <td style="font-weight: normal; padding-left: 5px;">
                <apex:outputText value="{0, number, }">
                    <apex:param value="{!Opportunity.Mobile_Display_Impression__c}"/>
                </apex:outputText>
            </td>
        </tr>
        <tr>
            <td align="left" style="color: #808080; border-right-style: solid; border-right-width: thin;
                border-right-color: #30b55a;">
                Interstitial
            </td>
            <td style="font-weight: normal; padding-left: 5px;">
                <apex:outputText value="{0, number, }">
                    <apex:param value="{!Opportunity.Moblie_Interstitial__c}"/>
                </apex:outputText>
            </td>
        </tr>
        
        <tr>
            <td colspan = "4">
                &nbsp;
            </td>
        </tr>
        
        <tr style="display:{!IF(OR(Opportunity.Web_Spots_B__c == NULL, Opportunity.Web_Display_Impression__c == NULL, Opportunity.Web_Interstitial__c == NULL), 'none','block')}">
            <td colspan="4" style="font-weight: bold; border-bottom-style: solid; border-bottom-width: thick;
                border-bottom-color: #30b55a;">
                Web Spots -
                    <apex:outputText value="{0, number,}">
                    <apex:param value="{!Opportunity.Web_Spots_B__c}"/>
                    </apex:outputText>
            </td>
        </tr>
        

        <tr style="display:{!IF(OR(Opportunity.Web_Spots_B__c == NULL, Opportunity.Web_Display_Impression__c == NULL, Opportunity.Web_Interstitial__c == NULL), 'none','block')}">
            <td align="left" style="color: #808080; border-right-style: solid; border-right-width: thin;
                border-right-color: #30b55a;">
                Audio Ads 
            </td>
            <td style="font-weight: normal; padding-left: 5px;">
                <apex:outputText value="{0, number, }">
                    <apex:param value="{!Opportunity.Web_Spots_B__c}"/>
                </apex:outputText>
            </td>
        </tr>   
        
        
        
        <tr style="display:{!IF(OR(Opportunity.Web_Spots_B__c == NULL, Opportunity.Web_Display_Impression__c == NULL, Opportunity.Web_Interstitial__c == NULL), 'none','block')}">
            <td align="left" style="color: #808080; border-right-style: solid; border-right-width: thin;
                border-right-color: #30b55a;">
                Companion Banner
            </td>
            <td style="font-weight: normal; padding-left: 5px;">
                <apex:outputText value="{0, number, }">
                <apex:param value="{!Opportunity.Web_Spots_B__c}"/> 
                </apex:outputText>
            </td>
        </tr>   
       
        
        <tr style="display:{!IF(OR(Opportunity.Web_Spots_B__c == NULL, Opportunity.Web_Display_Impression__c == NULL, Opportunity.Web_Interstitial__c == NULL), 'none','block')}">
            <td align="left" style="color: #808080; border-right-style: solid; border-right-width: thin;
                border-right-color: #30b55a;">
                Display Impression
            </td>
            <td style="font-weight: normal; padding-left: 5px;">
                <apex:outputText value="{0, number,}">
                    <apex:param value="{!Opportunity.Web_Display_Impression__c}"/>
                </apex:outputText>
            </td>
      </tr> 
      
       <tr style="display:{!IF(OR(Opportunity.Web_Spots_B__c == NULL, Opportunity.Web_Display_Impression__c == NULL, Opportunity.Web_Interstitial__c == NULL), 'none','block')}">
            <td align="left" style="color: #808080; border-right-style: solid; border-right-width: thin;
                border-right-color: #30b55a;">
                Interstitial
            </td>
            <td style="font-weight: normal; padding-left: 5px;">
                <apex:outputText value="{0, number,}">
                    <apex:param value="{!Opportunity.Web_Interstitial__c}"/>
                </apex:outputText>
            </td>
        </tr> 
        
       
        <tr style="display:{!IF(OR(Opportunity.Web_Spots_B__c == NULL, Opportunity.Web_Display_Impression__c == NULL, Opportunity.Web_Interstitial__c == NULL), 'none','block')}">
            <td colspan="4">
                &nbsp;
            </td>
        </tr>
        
          <tr>
            <td colspan="4" style="font-weight: bold; border-bottom-style: solid; border-bottom-width: thick;
                border-bottom-color: #30b55a;">
                Total 
                </td> 
        </tr>
        <tr>
            <td align="left" style="color: #808080; border-right-style: solid; border-right-width: thin;
                border-right-color: #30b55a;">
                Spots
            </td>
            <td style="font-weight: normal; padding-left: 5px;">
                <apex:outputText value="{0, number,}">
                    <apex:param value="{!Opportunity.Total_Spot_Booked__c}"/>
                </apex:outputText>                
            </td>
        </tr>
        <tr>
            <td align="left" style="color: #808080; border-right-style: solid; border-right-width: thin;
                border-right-color: #30b55a;">
                Approx. Impressions 
            </td>
            <td style="font-weight: normal; padding-left: 5px;">
                <apex:OutputText value="{0, number, }">
                    <apex:param value="{!Opportunity.Total_Impressions__c}"/> 
                </apex:OutputText>                
            </td>
        </tr>
        <tr>
            <td colspan="4">
                &nbsp;
            </td>
        </tr>
        <tr>
            <td colspan="4" style="font-size: medium; font-weight: normal">
                Note: Spots will be spread out on the Mobile Playlist, Radio and ROS.        
            </td>
        </tr>
        
        <tr>
            <td colspan="4">
                &nbsp;
            </td>
        </tr>
        
        <tr>
            <td colspan="4" style="font-size: medium; font-weight: bold">
                <font color ="blue"> Deliverables from {!Opportunity.Account.Name} </font>
            </td>
        </tr>
        <tr>
            <td colspan="4" style="font-size: medium; font-weight: normal">
                <font color ="blue"> {!Opportunity.Campaign_Comments__c} </font>
            </td>
        </tr>
        
        <tr>
            <td colspan="4">
                &nbsp;
            </td>
        </tr>
        <tr>
            <td colspan="4">
                &nbsp;
            </td>
        </tr>
        
        <tr>
            <td colspan="4">
                &nbsp;
            </td>
        </tr>
        
         <tr>
            <td colspan="4" style="font-size: medium; font-weight: bold">
        Confidentiality:                 
            </td>
        </tr>
        
        <tr>
            <td colspan="4" style="font-size: medium; font-weight: normal">
        <p> The parties involved acknowledge and agree that this term sheet, its material terms and conditions and any other information 
            
        disclosed by one party to the other party in connection with this proposal or negotiation of the agreement is Confidential Information.</p>
        
         </td>
        </tr>
        
        <tr>
            <td colspan="4" style="font-size: medium; font-weight: bold">
        
        Above terms agreed to by:
            </td>
        </tr>

        <tr>
            <td colspan="4" style="font-size: medium; font-weight: normal">
        <br></br>
        Name:                           ____________________________________________________________________________________
        <br></br> Designation:                      ____________________________________________________________________________________

        <br></br> Company Name:             ____________________________________________________________________________________ 
        
        <br></br> Email Address:                ____________________________________________________________________________________ 
        
        <br></br> Mailing Address and Contact Details: ____________________________________________________________________________________ 
        
        <br></br> Signature:                            ____________________________________________________________________________________ 
        
        <br></br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            Date
        </td>
        </tr>
        <tr>
            <td colspan="4" style="font-size: medium; font-weight: bold">
        Above terms agreed to by (Name):
            </td>
        </tr>
        
        <tr>
            <td colspan="4" style="font-size: medium; font-weight: normal">
        <br></br> Name:                             ____________________________________________________________________________________ 
        
        <br></br> Designation:                      ____________________________________________________________________________________
        
        <br></br> Signature:                            ____________________________________________________________________________________
        <br></br>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            Date                                                                                                        
            </td>
        </tr>

 </body>
        </table>
        </center>
        </apex:pageBlock> 
        </apex:form>
        
    </html> 
</apex:page>

 
pconpcon
I will start by saying that doing this all with tables is a terrible way to do this.  You should be doing it with a comination of divs, headers and tables depending on the type of data you're trying to display.  For example, your "Web Spots" should be header tag and then below it should be a table.  Also, you should use apex:outputPanel with a layout of none and the render tag to show or hide the sections.  For example
 
<apex:page standardController="Campaign" renderAs="pdf" applyBodyTag="false" applyHtmlTag="false" showHeader="false">
    <html>
        <head>
            <style>
                .header {
                    border-bottom-style: solid;
                    border-bottom-width: thick;
                    border-bottom-color: #30b55a;
                }
                
                .header h1 {
                	font-size: 12pt;
                	margin-bottom: 2px;
                }
                
                table, table tr, table tr td {
                	border: none;
                	border-collapse: collapse;
                }
                
                table tr td {
                	padding: 2px;
                }
                
                .desc {
                    color: #808080;
                    border-right-style: solid;
                    border-right-width: thin;
                    border-right-color: #30b55a;
                	padding-right: 10px;
                }
                
                .value {
                	padding-left: 10px;
                }
            </style>
        </head>
        <body>
            <apex:outputPanel layout="none" rendered="{!NOT(ISBLANK(Campaign.Name))}">
                <div class="header"><h1>Campaign Information</h1></div>
                <table>
                    <tr>
                        <td class="desc">Campaign Name</td>
                        <td class="value">{!Campaign.Name}</td>
                    </tr>
                    <tr>
                        <td class="desc">Brand</td>
                        <td class="value">{!Campaign.Owner.Name}</td>
                    </tr>
                    <tr>
                        <td class="desc">Start Date</td>
                        <td class="value">
                            <apex:outputText value="{0,date,MM'/'dd'/'yyyy}">
                                <apex:param value="{!Campaign.StartDate}" /> 
                            </apex:outputText>
                        </td>
                    </tr>
                    <tr>
                        <td class="desc">End Date</td>
                        <td class="value">
                            <apex:outputText value="{0,date,MM'/'dd'/'yyyy}">
                                <apex:param value="{!Campaign.EndDate}" /> 
                            </apex:outputText>
                        </td>
                    </tr>
                </table>
            </apex:outputPanel>
        </body>
    </html>
</apex:page>

I would also recommend reviewing field sets [1] and they may help simplify your code.

[1] http://blog.deadlypenguin.com/blog/2016/04/25/field-sets-dynamic-visualforce/
 
This was selected as the best answer