Good day

Please can you explain to me how to create a table with multiple rows in a visualforce page. First row describes an attribute and the other rows contain a textbox to enter the value of the attribute.

Below is the code that I tried out but its not giving me the layout that I require:

<apex:page sidebar="true" >
<apex:form >
<apex:panelGrid columns="1" width="50%" cellpadding="5" cellspacing="5" >
  <apex:outputtext value="Network"/>
  <apex:inputtext />
  <apex:outputtext value="Size"/>
  <apex:inputtext />
  <apex:outputtext value="Assigned By"/>
  <apex:inputtext />
  <apex:outputtext value="Assign Date"/>
  <apex:inputtext /> 
  <apex:outputtext value="Percentage in Use"/>
  <apex:inputtext /> 
  <apex:commandbutton value="Save"/>

The layout that I am currently getting with the code snippet above is as follows:

Actual Table Layout

I would like to get the layout shown below:

Desired Table Layout

Thank you in advance.


You need to use apex:pageblocktable for this.

<apex:pageBlock title="My Content">

    <apex:pageBlockTable value="{!account.Contacts}" var="item">

        <apex:column value="{!item.name}"/> 




You can also use apex:repeat to create HTML table and use your own custom styling.

Or can use apex:datatable to create a table.

Reference and Difference between all of them

  • Thanks @Tushar I looked at the suggested links. The thing is I want to capture data that is entered into the respective fields and not necessarily display data from any collections. Its a fill in form that I am currently working on – user23 Aug 15 '16 at 9:57
  • @user23 then use apex:column and apex:inputfield combination. – Tushar Sharma Aug 15 '16 at 10:03
  • Hi @Tushar please can you assist me with an example of how I can go about the suggested proposal. Thank you – user23 Aug 15 '16 at 13:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.