+ Start a Discussion
rohitrrohitr 

How to create Visualforce Table with rolspan and colspan

Hi,

 

Please provide me Visualforce equivalent (with pageblocktable) of the below html code.

 

 

<html>
<table border="1">
<tr>
<td rowspan="2">Name</td>
<td rowspan="2">SSID</td>
<td colspan="3" align="center">Bank</td>
</tr>
<tr>
<td>Bank Name</td>
<td>Bank Code</td>
<td>Account No.</td>
</tr>
</table>  
</html>

 

I'm having troubles creating a second row.

 

Thanks in advance,

Rohit R

bob_buzzardbob_buzzard

You can't have row/column spans in a pageblocktable.  This is one of the use cases where you would have a regular HTML table instead.

 

Is there any reason why you are looking to use a pageblocktable?

sandeep@Salesforcesandeep@Salesforce

Hi I have written this code for you whichi is HTML code but looks like PageBlock Table as I have applied PageBlock Table CSS. 

Here is code 

<apex:page controller="t">
<apex:form>
<apex:pageBlock>
<html>
<table border="1" class="list" cellspacing="0" cellpadding="0">
<tr class="headerRow" >
<td rowspan="2">Name</td>
<td rowspan="2">SSID</td>
<td colspan="3" align="center">Bank</td>
</tr>
<tr class="headerRow" >
<td>Bank Name</td>
<td>Bank Code</td>
<td>Account No.</td>
</tr>
<apex:repeat value="{!DataList}" var="data">
<tr class="dataRow" onmouseover="if (window.hiOn){hiOn(this);}" onmouseout="if (window.hiOff){hiOff(this);}">
<td>Test1</td>
<td>TestId1</td>
<td>Bank Name1</td>
<td>Bank Code1</td>
<td>Account No.</td>
</tr>
</apex:repeat>
</table>
</html>
</apex:pageBlock>
</apex:form>
</apex:page>

 

controller : 

public class t
{
public List<String> DataList{get;set;}
public t()
{
DataList = new List<String>{'a' ,'b'};
}
}

 

Please mark this as solution and give me kudos if it helps you : 

Here is your table Looking : 

older :

NameSSIDBank
Bank NameBank CodeAccount No.

 

New Equivalent Page Block Table : 

 

Page Block Table Interpretation

 

rohitrrohitr

Thanks sandeep,

 

Please let me know how i can fill the rows with data from a controller.

I need to fill this with contact records from an SOQL

 

As in pageblock table we do like i've shown below .

<apex:pageBlockTable var="a" value="{!contactList}" id="producertable" >
<apex:column headerValue="Name"  rowspan="2">
<apex:outputText value="{!a.Name}" />
</apex:column>
.
.
.
.
.
</apex:pageBlockTable>

 

 

Regards,

Rohit R

MagulanDuraipandianMagulanDuraipandian

You cannot use rowspan and colspan in apex:pageBlockTable.

 

Regards,

Magulan D

Salesforce.com certified Force.com Developer.

SFDC Blog

SFDC Site

If this post is your solution, kindly mark this as the solution and give Kudos.

Sunny670Sunny670
<td>Bank Name</td> if it is your row then for data use like
<td><apex:outputField value="{!your required value}" /></td>
oleksiyoleksiy
In case someone will be looking for the solution (as I was), here is how to resolve this:
<apex:pageblockTable value="{!Accounts}" var="a">
        <apex:column value="{!a.Name}" rowspan="2"/>
	<apex:column value="{!a.SSID}" rowspan="2"/>
	<apex:column value="{!a.Bank}" colspan="3"/>
	<apex:column value="{!a.Bank_Name}" breakBefore="true"/>
	<apex:column value="{!a.Bank_Code}"/>
	<apex:column value="{!a.Account_No}"/>
</apex:pageblockTable>
breakBefore="true" does the trick. The only problem that there is no way to have the same in the header, but it could be done with html.