CSS and "traffic-lighting" values in a table

[latte]

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]

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 ?

[latte]

"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]

Hi latte,

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

Code:

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 “

[latte]

"mat" wrote:

Hi latte,

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

Code:

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

[Author]

Posts