dynamic color change of table cells

css implement gradient in cells

[smallcompany]

I hope I titled this right.

I thought it would be cool if I can set the background color of table cells by setting the base color for i.e. first cell in a row, and then setting to lighten each next by 20%, by using the nth child formula.

For example, for the 1st cell I set the color to #000 (black), so the 2nd cell is 80% of black, 3rd 60% of black, and so on.

Would this be possible?

Thank you

[NickMNS]

You can try using the :nth-child() pseudo class.

tr:nth-class(1){background:#000;}
tr:nth-class(2){background:#333;}
tr:nth-class(3){background:#AAA;}
tr:nth-class(4){background:#CCC;}
tr:nth-class(5){background:#FFF;}

[lucy24]

Just make sure you're not creating accessibility problems. If the cells contain images, that’s one thing, but if it’s text, what happens to its readability?

Also, make sure the table remains a perfect grid--no colspan or rowspan variations--or disaster will ensue. (That is: the world as we know it will not end. But it will look frightful.)

[smallcompany]

Thanks for both replies.
1st, I know that, I wanted to set the starting color and let each next be reduced/increased by same percentage in correlation to the previous one. To automate it.
2nd, as I already experimented by setting gradual cell backgrounds manually by using nth child, I run into that readability issue.

[NickMNS]

To automate it you will need to use JS.

[lucy24]

But then your scriptless visitors won't see what you want them to see. It doesn't have to be client-side dynamic, though, does it? You could do the same thing in php-or-equivalent ... and then, if you ever do need to mess with colspan or rowspan, you can code it to make the appropriate adjustments: this is the 2nd cell in its row, but I need it to be colored like a 3rd cell because of stuff that happened earlier in the table.

:: detour to check something ::

Nope, I don't think you could get (calc) in CSS alone to work. Aside from the +-*/ limitation, I don't think colors can even take calculated values.

In any language--even javascript--it would be easy. For each nth child, it's something^n--or Math.pow(blahblah), I have to look it up every time--multiplied by your starting value. And then round off to integers to make the CSS happy.

Just how flexible does it need to be? Do you envision lots of tables, with varying numbers of columns? Would you then want the percentage to be determined by the total number of columns, so that the 5th column in a 10-column table or the 3rd column in a 6-column table or the 20th column in a 40-column table (ouch) would all come out at 50%, and the intervening columns are appropriately scaled?

Or would you want each cell to be a percentage of the preceding cell--no matter how many or how few there are--so you never reach zero?

Hm. This seems like a fun little programming exercise.

[NickMNS]

But then your scriptless visitors won't see what you want them to see.

They also wont see any ads!.... (I make money from ads)

Yes this would be very easy with JS. You can always play with opacity which is denominated as a ratio.

That being said, the roll of a table is the display text. But what is being described begins to border on a heat map, and the use of table may not be the best suited for this. I use SVG for this type thing. You can present it in a tabbed format the heat map shown (showing colors and text values) and then the raw data on another tab in table form.

[Travis]

there is a "calc" keyword in CSS3, which allows to "calculate" values, but I don't know how it works.

[lucy24]

See earlier post. I looked it up; there are at least two impediments to using (calc).

[keyplyr]

But then your scriptless visitors won't see what you want them to see

Not enough to worry about IMO.

My NoScript alert is only called once or twice every several months out of hundreds of thousands of page loads, and most of those load JS on the next page load so they're just using a browser extension they can turn off to continue.

[Travis]

At worse, you can create a background gradient at the table level.

[lucy24]

My NoScript alert is only called once or twice every several months out of hundreds of thousands of page loads

Astounding. I see people getting the noscript version of piwik almost every day--and I think it is safe to say that my site is orders of magnitude smaller than any of yours.

[keyplyr]

One of the failings of stat software no doubt.

[lucy24]

stat software

?

I'm talking about requests in access logs. I almost never go into Piwik itself (yes, I realize it's called something different now), I just track the requests for piwik.php. And then, if I have grounds for suspicion, cross-check against logs for the site itself.