Webmaster Forum / HTML, CSS, Scripts / CSS / July 2008

I am trying to create a Zebra table where each Zebra "Strip" consists of two
rows.  I am using a classical table to create the Zebra table. In my CSS, I
have

.dark {
background-color: #00FFFF;
}

.light {
background-color: #CCFFFF;
}

  <tr class="light ">
   <td class="name">Name</td>
   <td class="addr">Street</td>
   <td class="email">Email</td>
   <td class="interest">Interests</td>
  </tr>
  <tr class="light ">
   <td>Spouse</td>
   <td>Telephone</td>
   <td>Spouse Email</td>
   <td>Spouse Interests</td>
  </tr>

  <tr class="dark">
   <td class="name">Joe</td>
   <td class="addr">Elm</td>
   <td class="email">Something</td>
   <td class="interest">More</td>
  </tr>
  <tr class="dark">
   <td>Jane</td>
   <td>999 999-9999</td>
   <td>Something Email</td>
   <td>Something Interests</td>
  </tr>

I would to wrap the two rows in a single definition, like with a <div> or a
<span> but having been able to make that work.

<div class="light">
  <tr>
   <td class="name">Name</td>
   <td class="addr">Street</td>
   <td class="email">Email</td>
   <td class="interest">Interests</td>
  </tr>
  <tr class="light ">
   <td>Spouse</td>
   <td>Telephone</td>
   <td>Spouse Email</td>
   <td>Spouse Interests</td>
  </tr>
</div>

<div class="dark">
  <tr>
   <td class="name">Joe</td>
   <td class="addr">Elm</td>
   <td class="email">Something</td>
   <td class="interest">More</td>
  </tr>
  <tr class="dark">
   <td>Jane</td>
   <td>999 999-9999</td>
   <td>Something Email</td>
   <td>Something Interests</td>
  </tr>
</div>

Appreciate your help.  Thanks...

Bruce