[SOLVED] Zebra Row Color <DIV>

[Monie]

Code: Select all

<%
    RowCount = 0
    While ((Repeat1__numRows <> 0) AND (NOT rsCurrentSale.EOF))
    If (RowCount Mod 2)=0 Then RowColour = "#DEDEDE" Else RowColour = "#CDCDCD" 
    RowCount = RowCount + 1
%>        
<%
    Dim vTotal
    vTotal = rsCurrentSale("PPrice") * rsCurrentSale("SQuantity")
%>
<tr style="background-color:<%=RowColour%>">
    <td>
        <%=(rsCurrentSale.Fields.Item("PName").Value)%>
    </td>
    <td>
        <%=(rsCurrentSale.Fields.Item("SQuantity").Value)%>
    </td>
    <td>
        RM<%=(rsCurrentSale.Fields.Item("PPrice").Value)%>
    </td>
    <td>
        RM<%=vTotal%>
    </td>
</tr>
<% 
    Repeat1__index=Repeat1__index+1
    Repeat1__numRows=Repeat1__numRows-1
    rsCurrentSale.MoveNext()
    Wend
%>

I am just wondering if this zebra row color technique can be used in <div> elements to perform just like the table row.

I have not tested them in my css page but would glad if someone can give me a buzz of how to to do this in css page.

Thanks..

[karinne]

If you are displaying data, why use a div? The table element is what should be used in this case.

[AdRock]

If you were using PHP, I could help you

[Monie]

Well, most of you encourage to use CSS and throw away the "table" things...

Thats why I am asking if this kind of code can be handle by CSS. I am using ASP by the way, and yes I am trying to display some data from my database to this "Zebra Row Color".

Well, that's mean CSS <div> cannot be use to display zebra row color huh?

Thanks.

[karinne]

Originally Posted by monie

Well, most of you encourage to use CSS and throw away the "table" things...

No ... we want people to start using the elements for what they were intended for. The table element was create to display tabular data .... not to help you lay out your site.

Originally Posted by monie

Well, that's mean CSS <div> cannot be use to display zebra row color huh?

It can be done but is the div element the proper element for the job? If you are displaying tabular data, then no.

[Monie]

Ok, I get the idea.

CSS for Layout!
Table for Tabular Data!

Thanks Karinne.
By the way, I like the new tag that you have under your name there! Does "Reputable Member" get one too?

Thanks again for the explaination above.

[karinne]

Originally Posted by monie

Ok, I get the idea.

CSS for Layout!
Table for Tabular Data!

Yes! see ... that wasn't so hard

Originally Posted by monie

By the way, I like the new tag that you have under your name there! Does "Reputable Member" get one too?

Thanks monie ... we're slowly migrating to the new skin! Man I can't wait for this to be over!

Reputable Members won't have one ... just people on staff, supermembers and the newsletter team

Originally Posted by monie

Thanks again for the explaination above.

No problem!

[Monie]

Originally Posted by karinne

Thanks monie ... we're slowly migrating to the new skin! Man I can't wait for this to be over!

Back to few years ago, when I started to join WebForumz, they are still using the blue color theme website, if you still remember, and after that I left WebForumz for a few years and back again with the current theme. It's been a long time and I just can't wait for the new theme. Good Luck then..

Originally Posted by karinne

Reputable Members won't have one ... just people on staff, supermembers and the newsletter team

I promise myself I will get one of that soon!

[AdRock]

This is how i did it in php. If you can try and translate that to ASP somehow, it may be of some use as I no know nothing about ASP

PHP: Select all

echo "<table id='MyTable' class='style3'>\n";
echo "<tr><th>Name</th><th>Location</th><th>URL</th></tr>\n";
$z = 0;
while($row=mysql_fetch_array($result))
    {
    $name = htmlentities($row['name']);
    $location = htmlentities($row['location']);
    $url = $row['url'];
 
    if($z % 2==0)
    { //this means if there is a remainder
        echo "<tr class='yellow'>\n";
 $z++;
    }
     else
    { //if there isn't a remainder we will do the else
        echo "<tr class='white'>\n";
 $z++;
    }
     echo "<td class='left'>".$name."</td><td class='left'>".$location."</td><td class='right'><a href='".$row['url']."'>".DisplayURL($url)."</a></td>\n";
     echo "</tr>\n";
    }
//now let's close the table and be done with it
echo "</table>\n"; 

[MikeHopley]

That seems unnecessarily complicated.

I would just add a class to every other row of the table:

Code: Select all

<tr class="alternateRow">...</tr>

If you prefer to avoid the extra markup, then you can use javascript to add these classes automatically. This is especially handy when you make repeated use of an effect.

[AdRock]

Originally Posted by MikeHopley

That seems unnecessarily complicated.

I would just add a class to every other row of the table:

Code: Select all

<tr class="alternateRow">...</tr>

If you prefer to avoid the extra markup, then you can use javascript to add these classes automatically. This is especially handy when you make repeated use of an effect.

I do have a class for the table rows but my example is connected to database and alternates the row colors. That's why it seems a lot of code

As for using JavaScript to do this, what if a user has JavaScript disabled in their browser?

[Monie]

Yeah... that is one thing we have to put in mind when dealing with javascript.

[MikeHopley]

Originally Posted by AdRock

As for using JavaScript to do this, what if a user has JavaScript disabled in their browser?

Then the user will not get zebra colours. OH MY GOD NO!

Javascript should be used to enhance websites. Wherever possible, all content and important functions should remain accessible without javascript.

Most users will still get your pretty zebra colours. The others will still get the table.

[karinne]

Originally Posted by MikeHopley

Then the user will not get zebra colours. OH MY GOD NO!

Javascript should be used to enhance websites. Wherever possible, all content and important functions should remain accessible without javascript.

Most users will still get your pretty zebra colours. The others will still get the table.

Too many people tend to forget that

[alexgeek]

plus this:
January 94% 6%
Thats the amount of people that have javascript turned on and off.

[Monie]

What is the point/purpose/advantage of turning off the javascript, by the way?

[alexgeek]

Originally Posted by monie

What is the point/purpose/advantage of turning off the javascript, by the way?

there are some JS attacks/annoyances people may want to avoid.

[Monie]

oic...
Well thanks for clearing that up alex.

[AdRock]

Originally Posted by monie

What is the point/purpose/advantage of turning off the javascript, by the way?

Some people see it as a security threat

[Monie]

Ok I get it.

Thanks everyone.