+ Start a Discussion
arpit vijayvergiyaarpit vijayvergiya 

how to make table data showing like this

First Namearpitvikash 
Last Namevijaykumar 
Emailabc@gmail.comabc1@gmail.com 
Phone34543543534435454 
Citynoidadelhi 
    
    
Best Answer chosen by arpit vijayvergiya
GulshanRajGulshanRaj
Hi,
You can use Lightning Design System (https://www.lightningdesignsystem.com/components/data-tables/?variant=advanced#react-target)
Here is code which will give you idea to proceed further:
<table class="slds-table slds-table--bordered slds-table--cell-buffer" >
	    <tbody>
	    	<tr>
	    		<th scope="row">
	    			<b>First Name</b>
	    		</th>
	    		<td >
	    			arpit
	    		</td>
	    		<td >
	    			vikash
	    		</td>
	    	</tr>
	    	<tr>
	    		<th scope="row">
	    			<b>Last Name</b>
	    		</th>
	    		<td >
	    			vijay
	    		</td>
	    		<td >
	    			kumar
	    		</td>
	    	</tr>
	    	<tr>
	    		<th scope="row">
	    			<b>Email</b>
	    		</th>
	    		<td >
	    			abc@gmail.com	
	    		</td>
	    		<td >
	    			abc1@gmail.com	
	    		</td>
	    	</tr>
	    	<tr>
	    		<th scope="row">
	    			<b>Phone</b>
	    		</th>
	    		<td >
	    			345435435
	    		</td>
	    		<td >
	    			34435454
	    		</td>
	    	</tr>
	    	<tr>
	    		<th scope="row">
	    			<b>City</b>
	    		</th>
	    		<td >
	    			noida
	    		</td>
	    		<td >
	    			delhi	
	    		</td>
	    	</tr>
	    </tbody>
	</table>

It will look like this:
User-added image


Use <apex:slds /> in your Visualforce page, this will add Lightning Design System library.

If you are going to populate date from your object then you need <apex:repeat to generate <td>'s like this:
             <tr>
	    		<th scope="row">
	    			<b>First Name</b>
	    		</th>
	    		<apex:repeat value="{!yourListVariable}" var="a" >
		    		<td >
		    			{!a.Firstname}
		    		</td>
		    	</apex:repeat>
	    	</tr>
	    	<tr>
	    		<th scope="row">
	    			<b>Last Name</b>
	    		</th>
	    		<apex:repeat value="{!yourListVariable}" var="b" >
		    		<td >
		    			{!b.Lastname}
		    		</td>
		    	</apex:repeat>
	    	</tr>


All the best!!

Regards
Gulshan Raj