Create Table in visual force

Question

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:pageBlock>
<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"/>
</apex:panelGrid>
</apex:pageBlock>
</apex:form>
</apex:page>

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

I would like to get the layout shown below:

Thank you in advance.

Answer 1

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}"/> 

    </apex:pageBlockTable> 

</apex:pageBlock> 

Reference

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