Is it possible to use css to Alternate Row colors?

**kuau** · 08-05-2008, 05:47 AM

I'm wondering if there exists yet an elegant method of using css to alternate row background colors. I know how to do it a few ways with tables but I am not fond of tables. I did Google it, but found nothing useful.

Any one out there solved this problem yet? Thanks.

PS. remember back when all search results had a "Last Updated" date on the websites? What happened to those dates? I found them very useful, but they just suddenly vanished, and on most sites there is no mention of when the info came out. You have to really dig for any indication of when something was written. This is a pet peeve of mine.

**allahverdi** · 08-05-2008, 06:40 AM

I don't know with css.

What about to give classes to divs?

One of the examples is WordPress. Look at the comments. Some of them are classed, with 1,2 and etc. Then it gets, odd and even numbers.

**rangana** · 08-05-2008, 07:50 AM

I doubt we're on the same boat, I believe this ain't what you mean:

HTML Code:

<style type="text/css">
.odd{background:#ffe;}
.even{background:#eee;}
</style>
<ul>
<li class="odd">Odd</li>
<li class="even">Even</li>
<li class="odd">Odd</li>
<li class="even">Even</li>
<li class="odd">Odd</li>
<li class="even">Even</li>
<li class="odd">Odd</li>
<li class="even">Even</li>
<li class="odd">Odd</li>
<li class="even">Even</li>
</ul>

If it really is'nt what you're after for, please do rephrase.

**jscheuer1** · 08-05-2008, 01:40 PM

That's good rangana, but even divs will do nicely:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.odd{background:#ffe;}
.even{background:#eee;}
</style>

</head>
<body>
<div class="odd">Odd</div>
<div class="even">Even</div>
<div class="odd">Odd</div>
<div class="even">Even</div>
<div class="odd">Odd</div>
<div class="even">Even</div>
<div class="odd">Odd</div>
<div class="even">Even</div>
<div class="odd">Odd</div>
<div class="even">Even</div>
</body>
</html>

However kuau, if you need columns in those rows, getting them to line up vertically can be difficult. But that's what tables generally are for, especially if you are presenting tabular data, like dates and times with event names or items with their prices and descriptions, that sort of thing.

The biggest problem with tables are their drag on page load times. A well constructed table that accurately sets the width of its columns with the very first row, and has its:

Code:

table {
table-layout: fixed;
}

set in the stylesheet will not have this problem.

**kuau** · 08-05-2008, 04:12 PM

Thanks! Oh, I thought it was bad form to use tables except to display spreadsheet-type data. So then, what is considered the best way to alternate rows in a table? I have seen it done with if statements, and also with ternary operators, and also with td definitions. I would really appreciate your (definitive) opinion.

In the above examples of doing it with css, what if you don't know how many rows there will be? My particular application seems to always be presenting varying amounts of data through a while loop. Sometimes I don't need columns.

Thank you very much.

Also is there a summary somewhere of what the symbols mean in query strings (eg. %3 etc). Its hard to find things when you don't know what they're called.

**jscheuer1** · 08-05-2008, 04:47 PM

Using css is best because you can later change the style for the classes without editing your script. If your tables are being generated by a script, there are probably numbers involved that could be used to determine the class name of each row, or you could do a toggle (something like):

Code:

var cn = 'odd'
something here that sets up a loop to write out the rows {
write a row with class="' + cn + '"
var cn = cn == 'odd'? 'even' : 'odd';
}

It would be similar in PHP, you would just need to use the proper syntax.

To be more specific I would need to see the code that generates the rows.

As to the other question, there would almost never be a %3 in a query, perhaps a %3e, or %3E, or %20 - that one's really common, it's a space.

The % sign just means that the next two characters make up a hex code that corresponds to the character being escaped (certain characters don't do well in URLs). If you had a chart of characters with their hex codes, that would tell you. Generally you don't need to know, they just represent characters that are in the link. You can always decipher any given one by making up a little script, ex:

Code:

alert(unescape('%3e'));

Here's a fairly good table of hex (and other, use the hex column) codes for common characters:

http://en.wikipedia.org/wiki/ASCII#A...ble_characters

**kuau** · 08-05-2008, 10:04 PM

Well, here is my code, but for some reason the drop-down list doesn't seem to produce the right day except the first time:

Code:

$today = date ('Y-m-d'); 
   if(isset($_GET['startdate']) && $_GET['startdate'] != ''){
	   $day = date('w',strtotime($_GET['startdate']));
   } else {
	 $day = date('w',strtotime($today));	
   }	
  ?>  
  <div id="ongoing">    
    <form action="/php/ongoing-new2.php" method="GET" name="SelectDay" class="datedrop">
    <span class="h1">ONGOING EVENTS For: </span> &nbsp; <select name="day" onChange="document.SelectDay.submit()" class="datedrop">    
    <option value=1 <?php if ($_GET['day'] =="1"){ echo " selected"; } ?> >MONDAY </option>
    <option value=2 <?php if ($_GET['day'] =="2"){ echo " selected"; } ?> >TUESDAY </option>
    <option value=3 <?php if ($_GET['day'] =="3"){ echo " selected"; } ?> >WEDNESDAY </option>
    <option value=4 <?php if ($_GET['day'] =="4"){ echo " selected"; } ?> >THURSDAY </option>
    <option value=5 <?php if ($_GET['day'] =="5"){ echo " selected"; } ?> >FRIDAY </option>
    <option value=6 <?php if ($_GET['day'] =="6"){ echo " selected"; } ?> >SATURDAY </option>
    <option value=0 <?php if ($_GET['day'] =="0"){ echo " selected"; } ?> >SUNDAY </option>
    </select> &nbsp; <input type="submit" value=" GO ">
    </form>
    <?php	    
    $sql = "SELECT DISTINCT event.event_id, ev_title, description, loc_id FROM event, recur WHERE event.event_id = recur.event_id 
	        AND recur.`dayofweek` = '".$day."' AND event.ongoing > 0 ORDER by ev_title ";
	$result = mysql_query($sql,$connection) or die("Couldn't execute $sql query. <br> mysql error: ".mysql_error()); 	
    while ($row = mysql_fetch_array($result)) 
    {
      $event_id    = $row[event_id];
      $ev_title    = $row[ev_title];
      $description = $row[description];
      $desc        =  substr($description, 0, 123);
      $loc_id      = $row[loc_id]; ?>
      <a href="/php/event-detail.php?event_id=<?php echo $event_id; ?>"><?php echo $ev_title; ?></a><br>
      <?php echo $desc; ?>...<a href="/php/event-detail.php?event_id=<?php echo $event_id; ?>">More</a><br>
    <?php } ?>
  </div><!--end ongoing

I could even live without the alternating rows if the code would just work reliably. Thanks very much.

Thanks for the info about the hex codes...that clears up a lot of mysteries for me.

**jscheuer1** · 08-06-2008, 03:38 AM

Something like:

PHP Code:


    <?php

    $cn  = "odd";  

    $sql = "SELECT DISTINCT event.event_id, ev_title, description, loc_id FROM event, recur WHERE event.event_id = recur.event_id 

            AND recur.`dayofweek` = '".$day."' AND event.ongoing > 0 ORDER by ev_title ";

    $result = mysql_query($sql,$connection) or die("Couldn't execute $sql query. <br> mysql error: ".mysql_error());     

    while ($row = mysql_fetch_array($result)) 

    {

      $event_id    = $row[event_id];

      $ev_title    = $row[ev_title];

      $description = $row[description];

      $desc        =  substr($description, 0, 123);

      $loc_id      = $row[loc_id]; ?>

      <div class="<?php echo $cn; ?>"><a href="/php/event-detail.php?event_id=<?php echo $event_id; ?>"><?php echo $ev_title; ?></a><br>

      <?php echo $desc; ?>...<a href="/php/event-detail.php?event_id=<?php echo $event_id; ?>">More</a></div>

    <?php 

    if ($cn == "odd")

        $cn = "even";

    else

        $cn = "odd";

    }

    ?>

**kuau** · 08-06-2008, 09:29 AM

Dear John: That worked perfectly... and no tables! Exactly what I wanted ... thanks so much. You are the best.

**rd42** · 10-20-2008, 12:18 AM

I've been looking for a solution like this and this has to be the most elegant yet. So much so that I registered just to say thanks.

Thanks!

Robert

Thread: Is it possible to use css to Alternate Row colors?

Thread Tools

Search Thread

Is it possible to use css to Alternate Row colors?

The Following User Says Thank You to rangana For This Useful Post:

The Following User Says Thank You to jscheuer1 For This Useful Post:

The Following User Says Thank You to jscheuer1 For This Useful Post:

The Following User Says Thank You to jscheuer1 For This Useful Post:

Excellent

Bookmarks

Bookmarks

Posting Permissions