two CSS Zebra table created from loop

[Meni]

Hello.

I have a loop that creates a table from mysql data:

[code]echo '<table border="1" bordercolor="#CFCFCF" align="center">';// a new table for every user...[/code]

I have a javascript function that turns this table into a striped table:

[code]<script language="javascript"><!--
function zebraTable() {
    // get the table
    var t = document.getElementById('zebra');

    // set the class name
    var theClass = "evenRow";

    // get a collection of rows
    var rCol = t.rows;

    // declare the counter
    var rowNum = 0;

    // loop through each row
    for (var i = 0; i < rCol.length; i++) {
        // apply the class name
        if (i % 2 == 0) rCol[i].className = theClass;
    }
}

onload = zebraTable;

--></script>[/code]

This javascrpit will inspect the ID of the table and if it's "zebra" it will stripe it.

All is well untill i want to have two or more tables in one page.

I can't name all of them "zebra" because it will only stripe the first table.

How do i go around this?

[ronverdonk]

Since you are in a [b]PHP[/b] forum: where is the PHP in your question?

Ronald  8)

[AndyB]

Since this isn't a php question and the solution I'll point you to is a CSS solution not javascript, I'll move this to the CSS forum after posting the link to what is likely the best solution:

http://www.alistapart.com/articles/zebratables