Salesforce UI styles with a custom html table

Sometime we need to create table in visual force page with html elements with same look and feel as standard pageblocktable. So we did not need to add extra style class in html table. We can do it with the standard style classes.

We need to do a little work to search the standard class name from pageblockTable and add those classes to custom html table:

As I have taken a simple example to show how to use the standard style class:

Visual Force page code:

<apex:page standardController="Contact">
   <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">
              <td class="dataCell">{!contact.FirstName}</td>
              <td class="dataCell">{!contact.LastName}</td>
              <td class="dataCell">{!contact.phone}</td>
           </tr>
           <tr class="dataRow">
             /* Put your code.*/
           </tr>
       </table>
   </apex:pageBlock>
 </apex:form>
</apex:page>

In the above code the style class “list”,”headerRow”,”dataRow”,”dataCell” all are the standard CSS classes.And add the following style for change color in mouse over event :

<style>
    tr.dataRow {
       background-color:white;
    }
    tr.dataRow:hover {
       background-color: #e3f3ff;
    };
</style>

We can use the standard salesforce element CSS in html elements for same look and feel.

• Posted in: Salesforce Apex
• Tagged: Custom html table, salesforce UI