I'm not sure how to do this or if its possible with CSS/HTML. I have tables that hold info on my index page that is entered from the members area. The table has a plain white background, which isn't my problem. I'd like it if when new info is entered it changes between two colors. White and Grey... I want the tables to switch between two colors every time new info is entered. I cant explain this very well. Heres an example -

blah blah blah info is here - White background
blah blah blah new info here - Grey background
blah blah blah newer is here - White background
blah blah blah newest info here - Grey background

The example I'm getting at can be seen here, scroll down the page until you see "The 30 Latest Featured Projects"

Thanks in advance!

See this example.

Its funny you showed me that link... I just found it a little while ago. I had no idea it was called - jQuery Advanced Striping. Now I have to figure out how to code this in to my current code. Thanks!

I cant seem to get this code to work with my table code below -

<script src="jquery.js"></script>
 <script type="text/javascript">
 $(document).ready(function(){
   $(".stripeMe tr").mouseover(function(){$(this).addClass("over");}).mouseout(function(){$(this).removeClass("over");});
   $(".stripeMe tr:even").addClass("alt");
 });
</script>

Table Code

<table width="780" cellpadding="0" cellspacing="0" border="0">
        <tr style="background-image: url(templates/{TPL_NAME}/images/tr-background.jpg); background-repeat: repeat-x;" align="center" class="table_titles">
          <td width="40%" align="left" height="18" style="padding-left:5px;">{TEMP}</td>
          <td width="6%">{LANG}</td>
          <td width="30%" align="left" style="padding-left:5px;">{TEMP}</td>
          <td width="12%">{LANG}</td>
          <td width="12%">{LANG}</td>
        </tr>
  {LOOP: FEAT_TEMP}
  <tr align="center" class="table_titles">
    <td align="left" style="padding-left:5px;"><a href="{TEMP}">{TEMP}</a></td>
    <td>{TEMP.temp}</td>
    <td align="left" style="padding-left:5px;">{TEMP}</td>
    <td>{TEMP}</td>
    <td>{TEMP}</td>
  </tr>
  <tr>
    <Td colspan="5" background="templates/{TPL_NAME}/images/hline_dot.gif"><img src="templates/{TPL_NAME}/images/dot.gif" width="1" height="1" alt="" border="0"></TD>
  </tr>
  {/LOOP: FEAT.temp}
  <tr>
    <td colspan="5"><a href="temp.php?filter=featured"><img src="templates/{TPL_NAME}/images/button_viewall.gif" width="76" height="16" alt="" border="0" hspace="0" vspace="10"></a></td>
  </tr>
      </table>

Here's the CSS

tr.alt td {
background: #ecf6fc;
}

tr.over td {
background: #bcd4ec;
}