How to change the design of the exported Excel or PDF files?

Question

I'm providing an export links to export some result into a PDF or Excel files.
The tables, in the exported files, don't look that good and I had tried to add some style to my VF page but it didn't work.
Also I couldn't display the image in the pdf file, and there are no borders for the table in both files.
My VF page looks like this:

<apex:page controller="A800addingMultipleInventoryItems2" showHeader="false" renderAs="pdf">
<!-- FOR EXCEL:
<apex:page controller="A800addingMultipleInventoryItems2" contentType="application/vnd.ms-excel#{!desiredClient.Name__c}.xls" cache="true">
-->
<apex:image url="http://i65.tinypic.com/4uawxe.png"/>
<br/>
<br/>
<br/>
<br/>
<apex:pageBlock >
    <apex:pageBlockSection columns="2">
        <apex:pageBlockSectionItem >
            <apex:outputText >Client Name (Primary): {!desiredClient.Name__c}</apex:outputText>                
        </apex:pageBlockSectionItem>

        <apex:pageBlockSectionItem >
            <apex:outputText >Contact Number: {!desiredClient.Phone__c}</apex:outputText>
        </apex:pageBlockSectionItem>

        <apex:pageBlockSectionItem >

        </apex:pageBlockSectionItem>
        <apex:pageBlockSectionItem >
            <apex:outputText >Email Address: {!desiredClient.Email__c}</apex:outputText>
        </apex:pageBlockSectionItem>

<!-- First Table To The Left -->
        <apex:pageBlockSectionItem>
            <apex:pageBlockTable value="{!ItemsForFiles}" var="item" style="width=100% !important;">
                <apex:column headerValue="Box #" value="{!item.Code_Number__c}" style="width=100% !important;"/>
                <apex:column headerValue="Description" value="{!item.Description__c}" style="width=100% !important;"/>
                <apex:column headerValue="Room" value="{!item.Storage_Unit__c}" style="width=100% !important;"/>
            </apex:pageBlockTable>            
        </apex:pageBlockSectionItem>

<!-- Second Table To The Right-->
        <apex:pageBlockSectionItem >
            <apex:pageBlockTable value="{!ItemsForFiles2}" var="item">
                <apex:column style="float: center;" headerValue="Box #" value="{!item.Code_Number__c}"/>
                <apex:column headerValue="Description" value="{!item.Description__c}"/>
                <apex:column style="float: center;" headerValue="Room" value="{!item.Storage_Unit__c}"/>
            </apex:pageBlockTable>
        </apex:pageBlockSectionItem>

        <apex:pageBlockSectionItem >
        </apex:pageBlockSectionItem>
        <apex:pageBlockSectionItem >
        </apex:pageBlockSectionItem>

        <apex:pageBlockSectionItem >
            <strong>Joining Date: </strong>
        </apex:pageBlockSectionItem>
        <apex:pageBlockSectionItem >
            <strong>Rental Period (Months): </strong>
        </apex:pageBlockSectionItem>

        <apex:pageBlockSectionItem >
            <strong>Storage End Date: </strong>
        </apex:pageBlockSectionItem>
        <apex:pageBlockSectionItem >
            <strong>Rental Fee: </strong>
        </apex:pageBlockSectionItem>

        <apex:pageBlockSectionItem >
        </apex:pageBlockSectionItem>
        <apex:pageBlockSectionItem >
        </apex:pageBlockSectionItem>

        <apex:pageBlockSectionItem >
            I understand and agree to the Terms and Conditions below:<br/>
            1. Returned cheque will cost m.<br/>
            2. If rent is returned unpaid for 30days, my items will be disposed without notice.
        </apex:pageBlockSectionItem>
        <apex:pageBlockSectionItem >
            3. This agreement is governed by the terms and conditions listed at, which limit our liability up to a maximum of .<br/>
            4. ................. is the legal .
        </apex:pageBlockSectionItem>

        <apex:pageBlockSectionItem >
        </apex:pageBlockSectionItem>
        <apex:pageBlockSectionItem >
        </apex:pageBlockSectionItem>

        <apex:pageBlockSectionItem >
            <strong>Name:</strong>
        </apex:pageBlockSectionItem>
        <apex:pageBlockSectionItem >
            <strong>Date:</strong>
        </apex:pageBlockSectionItem>

        <apex:pageBlockSectionItem >
            <strong>Signature:</strong>
        </apex:pageBlockSectionItem>
        <apex:pageBlockSectionItem >
        </apex:pageBlockSectionItem>
    </apex:pageBlockSection>

</apex:pageBlock>

The images for both files are:

Also I would love to know how to make the contents of the first [Box #] and the last [Room] columns display in the middle of the columns, and to make thin borders.

Answer 1

The reason your images aren't rendering is because they're not being uploaded as static resources. They can't be rendered to a PDF from an insecure link in they way you're attempting to it.

Additionally, PageBlockSections are unsafe for rendering in PDF's. The way you're using them clearly isn't causing an issue, but if used in the way they're typically used, it could be disastrous. For what you're attempting, what you basically need is an HTML <table> to hold your contents with two columns.

See the VisualForce Docs for more on the topic. For the rest, you need to learn some basic CSS for tables. Look at the tableborder property. Try visiting http://www.w3cschools.com for free tutorials on both HTML and CSS to get you started.