+ Start a Discussion
sonali  vermasonali verma 

HTML tags in visual force page

Hello
I want to explictly use HTML tags & standard CSS for visual force page creation.
visual force page compiles but some how I am not able to display the data.

<apex:page standardController="Contact"
           extensions="MyContactInfo">
   <apex:form >
      <style>
         tr.dataRow {
           background-color:white;
         }
         tr.dataRow:hover {
           background-color: #e3f3ff;
         };
     </style>
     <apex:pageBlock >
        <table class="list " border="0" cellpadding="0" cellspacing="0">
           <tr class="headerRow">
              <th class="headerRow"> First Name</th>
              <th class="headerRow"> Last Name </th>
              <th class="headerRow"> Phone </th>
             
             
           </tr>
           <tr class="dataRow">
           <apex:pageBlock>
                <apex:pageBlockTable value="{!contvals}"
                                      var="c">
               <td class="dataCell">{!c.FirstName}</td>
              <td class="dataCell">{!c.LastName}</td>
              <td class="dataCell">{!c.phone}</td>
               
                </apex:pageBlockTable>
          
           </apex:pageBlock>
                         </tr>
               </table>
   </apex:pageBlock>
 </apex:form>
</apex:page>
​​
public class MyContactInfo
{
    list<Contact> con = [select FirstName,LastName,Phone from Contact];
   
    public MyContactInfo(ApexPages.StandardController controller)
    {
    }
       public list<Contact> getcontvals()
    {
           return con;   
    }
  }

​Pleas let me know where I am going wrong.

sonali​
Best Answer chosen by sonali verma
Neetu_BansalNeetu_Bansal
Hi Sonali,

If you are using page Block table, you can only use <ape:columns> to display the data. Use the below code:
<apex:page standardController="Contact" extensions="MyContactInfo">
	<style>
		tr.dataRow {
			background-color:white;
		}
		
		tr.dataRow:hover {
			background-color: #e3f3ff;
		};
	</style>
	
	<apex:form >
		<apex:pageBlock >
			<apex:pageBlockSection columns="1" >
				<table class="list " border="0" cellpadding="0" cellspacing="0">
					<tr class="headerRow">
						<th class="headerRow"> First Name</th>
						<th class="headerRow"> Last Name </th>
						<th class="headerRow"> Phone </th>
					</tr>

					<apex:repeat value="{!Contvals}" var="c" >
						<tr class="dataRow">
							<td class="dataCell">{!c.FirstName}</td>
							<td class="dataCell">{!c.LastName}</td>
							<td class="dataCell">{!c.phone}</td>
						</tr>
					</apex:repeat>
				</table>
			</apex:pageBlockSection>
		</apex:pageBlock>
	</apex:form>
</apex:page>
Let me know, if you need any other help.

Thanks,
Neetu

All Answers

Neetu_BansalNeetu_Bansal
Hi Sonali,

If you are using page Block table, you can only use <ape:columns> to display the data. Use the below code:
<apex:page standardController="Contact" extensions="MyContactInfo">
	<style>
		tr.dataRow {
			background-color:white;
		}
		
		tr.dataRow:hover {
			background-color: #e3f3ff;
		};
	</style>
	
	<apex:form >
		<apex:pageBlock >
			<apex:pageBlockSection columns="1" >
				<table class="list " border="0" cellpadding="0" cellspacing="0">
					<tr class="headerRow">
						<th class="headerRow"> First Name</th>
						<th class="headerRow"> Last Name </th>
						<th class="headerRow"> Phone </th>
					</tr>

					<apex:repeat value="{!Contvals}" var="c" >
						<tr class="dataRow">
							<td class="dataCell">{!c.FirstName}</td>
							<td class="dataCell">{!c.LastName}</td>
							<td class="dataCell">{!c.phone}</td>
						</tr>
					</apex:repeat>
				</table>
			</apex:pageBlockSection>
		</apex:pageBlock>
	</apex:form>
</apex:page>
Let me know, if you need any other help.

Thanks,
Neetu
This was selected as the best answer
sonali  vermasonali verma
HI
thanks a lot.
 this works

sonali​​