Grow your CSS skills. Land your dream job.

CSS and "traffic-lighting" values in a table

  • # January 14, 2010 at 1:44 am

    Hi all -

    I’m wanting to do a public-domain crosstab app which would output data to an HTML table.
    One of the things I’d like to be able to do is to do "traffic-lighting" on the table.

    For example, if a value in a table cell is between (say) 0 and 19 inclusive, the background of the table cell would have a red style. If the value is from 20 to 49, the table cell would have a yellow background. For values of 50 and above, the cell would have a green background.

    So, in order to do this, CSS would have to be able to look at the value in a table cell, and apply formatting appropriately. However, I haven’t seen any evidence that CSS can do "range-dependent" formatting as I have described. Is this possible, and if so, how can it be done?

    Very many thanks in advance…. :) Bye for now -
    - latte

    mat
    # January 14, 2010 at 5:10 am

    CSS can’t do this you would need to use somthing like PHP;

    See: http://www.vatic.co.uk/matches

    For the scores i used php to determine weather the number was over 16, under 16 or 16 and then applied 3 different styles depending on the value.

    If you want the code then message me, but the data is pulled from a msql database table so i dont know weather or not u know how to create any of this ?

    # January 14, 2010 at 8:41 pm
    "mat" wrote:
    CSS can’t do this you would need to use somthing like PHP;

    See: http://www.vatic.co.uk/matches

    For the scores i used php to determine weather the number was over 16, under 16 or 16 and then applied 3 different styles depending on the value.

    If you want the code then message me, but the data is pulled from a msql database table so i dont know weather or not u know how to create any of this ?

    Hi Mat – thanks for your reply -
    Great! Yes, please, I’m keen to have the code – thanks! I’ll be fine – I’ll be able to figure out all of the bits and pieces.
    I’ll message you with my email address. Oh, btw – can I credit you in the acknowledgements when I merge this with my app?
    Bye for now -
    - latte

    mat
    # January 15, 2010 at 5:18 am

    Hi latte,

    See below the php i used for pulling in my data from my matches table:

    Code:
    < ?php
    $results_col = mysql_query("SELECT * FROM $matches WHERE match_played='1' ORDER BY match_date DESC");
    while($r=mysql_fetch_array($results_col))
    {
    echo "
  • n”;
    $r2 = mysql_fetch_array(mysql_query(“SELECT * FROM $teams WHERE team_id=’”.$r["match_team"].”‘”));
    echo “n”;
    echo “ vs. n”;
    echo ““.$r["match_opponent"].”n”;

    $match_score1=$r["match_score1"];
    $match_score2=$r["match_score2"];
    if ($match_score1 > $match_score2)
    {
    echo ““.$r["match_score1"].” – “.$r["match_score2"].”“;
    }
    elseif ($match_score1 < $match_score2)
    {
    echo "“.$r["match_score1"].” – “.$r["match_score2"].”“;
    }
    else
    {
    echo ““.$r["match_score1"].”“.$r["match_score2"].”“;
    }

    $r3 = mysql_fetch_array(mysql_query(“SELECT * FROM $events WHERE event_id=’”.$r["match_event"].”‘”));
    echo ““.$r3["event_name"].”n”;
    echo ““.$r["match_date"].”n”;
    echo “n”;
    }
    ?>

I’ve added a couple of line breaks between the if statements.

You will see that each if, elseif, and else each have a different span: <span class=’loss’>
This is obviously just defined in the stylesheet such as:

Code:
.loss { color: #f00}

You can ofcourse credit me in your app if you see fit to :) my website is:
http://www.est87.co.uk

# January 16, 2010 at 8:01 pm
"mat" wrote:
Hi latte,

See below the php i used for pulling in my data from my matches table:

Code:
< ?php
$results_col = mysql_query("SELECT * FROM $matches WHERE match_played='1' ORDER BY match_date DESC");
while($r=mysql_fetch_array($results_col))
{
echo "
  • n”;
    $r2 = mysql_fetch_array(mysql_query(“SELECT * FROM $teams WHERE team_id=’”.$r["match_team"].”‘”));
    echo “n”;
    echo “ vs. n”;
    echo ““.$r["match_opponent"].”n”;

    $match_score1=$r["match_score1"];
    $match_score2=$r["match_score2"];
    if ($match_score1 > $match_score2)
    {
    echo ““.$r["match_score1"].” – “.$r["match_score2"].”“;
    }
    elseif ($match_score1 < $match_score2)
    {
    echo "“.$r["match_score1"].” – “.$r["match_score2"].”“;
    }
    else
    {
    echo ““.$r["match_score1"].”“.$r["match_score2"].”“;
    }

    $r3 = mysql_fetch_array(mysql_query(“SELECT * FROM $events WHERE event_id=’”.$r["match_event"].”‘”));
    echo ““.$r3["event_name"].”n”;
    echo ““.$r["match_date"].”n”;
    echo “n”;
    }
    ?>

  • I’ve added a couple of line breaks between the if statements.

    You will see that each if, elseif, and else each have a different span: <span class=’loss’>
    This is obviously just defined in the stylesheet such as:

    Code:
    .loss { color: #f00}

    You can ofcourse credit me in your app if you see fit to :) my website is:
    http://www.est87.co.uk

    Hi Mat – sorry it’s taken me a long time to reply -
    Great – thanks very much for that code! I will indeed credit you if I use it.
    Thanks again, bye for now -
    - latte

    Viewing 5 posts - 1 through 5 (of 5 total)

    You must be logged in to reply to this topic.

    *May or may not contain any actual "CSS" or "Tricks".