How to give spacing between rows?

[RajaApex]

Hi,

I have a VF page to display the today's event details. It is displaying good. I need a spacing between rows now.

My code is,

<apex:page standardController="Event" extensions="dataTableCon1" >
 <style>
 .odd{background-color: white;}
 .even{background-color: #DFEFFB;}
 .line{line-height: 18pt;}
</style>
<script>
  window.onload = alternate("thetable");
  function alternate(id){
 if(document.getElementsByTagName){  
   var table = document.getElementById(id);  
   var rows = table.getElementsByTagName("tr");  
   for(i = 0; i < rows.length; i++){          
 //manipulate rows
     if(i % 2 == 0){
       rows[i].className = "even";
     }else{
       rows[i].className = "odd";
     }      
   }
 }
}
</script>
 <input type="button" value="print" onClick="window.print()"></input>
 <apex:form >
  <apex:sectionHeader title="Events"/>
  <apex:pageBlock >
  <apex:pageBlockSection >

  <apex:dataTable style="width:125%;" cellpadding="3" cellspacing="1"  value="{!Tasks}" var="tak"  id="theTable" rowClasses="odd,even"
   styleClass="tableClass">
  <apex:column style="width:8%;" >
  <apex:facet name="header">Start Date</apex:facet>
  <apex:outputText value="{!tak.StartDate__c}"/>
  </apex:column>

  <apex:column style="width:8%;">
  <apex:facet name="header">Start Time</apex:facet>
  <apex:outputText value="{!tak.StartTime__c}"/>
  </apex:column>

  <apex:column style="width:8%;">
  <apex:facet name="header">End Time</apex:facet>
  <apex:outputText value="{!tak.EndTime__c}"/>
  </apex:column>

 
  <apex:column style="width:8%;">
  <apex:facet name="header">Name</apex:facet>
  <apex:outputText value="{!tak.who.FirstName} {!tak.who.LastName}"/>
  </apex:column>
 

 
  <apex:column style="width:8%;">
<apex:facet name="header">Subject</apex:facet>
<apex:outputLink target="_blank"  value="/{!tak.id}">{!tak.Subject}</apex:outputLink>

</apex:column>
 
 
  <apex:column style="width:6%;">
   <apex:facet name="header">Type</apex:facet>
   <apex:outputText value="{!tak.who.Type}"/>
  </apex:column>

  <apex:column style="width:10%;">
   <apex:facet name="header">Account Name</apex:facet>
   <apex:outputText value="{!tak.AccName__c}"/>
  </apex:column>

  <apex:column style="width:10%;">
   <apex:facet name="header">Account Type</apex:facet>
   <apex:outputText value="{!tak.AccType__c}"/>
  </apex:column>


  <apex:column >
<apex:facet name="header">Description</apex:facet>
<apex:outputText value="{!tak.Description}"/>
</apex:column>

</apex:dataTable>

   <apex:outputLabel rendered="{!(ISNULL(Tasks))}" value="No Events on this day.." styleClass="noRowsHeader"></apex:outputLabel>
<br/><br/>

<apex:commandButton value="Back" action="{!taskfin}"/>

</apex:pageBlockSection>
</apex:pageBlock>

</apex:form>

</apex:page>

If you give some useful examples then I feel better in understanding.

Thanks,

[Imran Mohammed]

Did you try apex:pageBlockTable.

[RajaApex]

The output is not coming as expected in apex:pageBlockTable. It is good in apex:dataTable. But I need the spacing alone between rows. Kindly help me.

[krishnag]

my suggestion is do for putting a empty row between two rows.

[Imran Mohammed]

I will suggest you to use apex:repeat tag and html table tag.

[krishnag]

yaa html table tag is more flexible.

[krishnag]

or also you can use css and give spacing using the styles.

[RajaApex]

Hi,

Will you give some lines of code to achieve this? Because I didnt use html in the VF page yet.

[sinsiterrulez]

Why dont you use cellspacing & cellpadding style attributes to get some space instead of adding blank rows

[krishnag]

he already used cellspacing and cellpadding in his style you can see the code sin.