How to Display Table data horintally in visualforce Page?

Question

I was not able to display records in horizontally. In a table am retrieving Name,Roll_Number,School_Name,Grade,School_Phone and Date_of_Birth from custom_object__c. Now i want to show these item horizontally in Visualforce pages. below are image attached as i required. please help

Answer 1

You'll need to craft it bit more manual, don't think <apex:datatable> and <apex:pageBlockTable> can create something like this, at least not without some CSS tricks.

See if this gets you somewhere:

<apex:pageBlock>
    <apex:pageBlockSection columns="2">
        <apex:repeat value="{!contacts}" var="c">
            <apex:outputField value="{!c.Name}" />
            <apex:outputField value="{!c.Roll_Number__c}" />
            <apex:outputField value="{!c.School_Name__c}" />
            <apex:outputField value="{!c.Grade__c}" />
            <apex:outputField value="{!c.School_Phone__c}" />
            <apex:outputField value="{!c.Date_of_Birth__c}" />
            <!-- 
                if you want visual gaps - you could put pageBlockSections in the loop!
                or add some blank elements
            -->
            <apex:pageBlockSectionItem />
            <apex:pageBlockSectionItem />
            <apex:pageBlockSectionItem />
            <apex:pageBlockSectionItem />
        </apex:repeat>
    </apex:pageBlockSection>
</apex:pageBlock>

If you need it without Salesforce styling (but can't simply <apex:page standardStylesheets="false") - you can still use this structure to output raw html <table>, <tr>, <th>, <td> etc. There are lots of samples how to do raw html output, especially for pdf. Shameless plug: https://salesforce.stackexchange.com/a/194196/799