Creating a complex HTML table

Question

I'd like to create a HTML table similar to this as much as possible: enter image description here

Main 'features' would consist of:

tds colored based on values
bars in the background based on percentage
HTML and javascript/jQuery only (data is manually entered anyways)

Is it possible to do such a thing with HTML/js only, and what would you recommend for accomplishing this task?

It doesn't belong here... :) (many times, there are guys that even write it all for you, but it's still not the place) — gdoron
– gdoron, Commented Jun 1, 2012 at 14:18
I'm not sure this should be closed : that's clear, not trivial, he doesn't ask for complete solution and it's possible to respond correctly (Diodeus' answer seems OK). We should just remove the introduction. — Denys Séguret
– Denys Séguret, Commented Jun 1, 2012 at 14:23
yes... it can be done I would recommend just doing it... (seriously tho, do you just want someone to do it for you? there are consultants!) — Jakub
– Jakub, Commented Jun 1, 2012 at 14:27
Ahh, my first -1 :( I didn't ask for complete code at all... I'm just confused a bit is js aware of metrics (which I would use for bars) and coloring tds based on values... I mean, I could easily do this in python or php or something, but all I can use is html and js. I'm not even sure if all this is possible with only that... For example, Diodeus' and david's answers are just perfect pointers how could this be done... I know this place is not made for discussions, I need only few snippets to even start with this... Apologies one more time... — errata
– errata, Commented Jun 1, 2012 at 14:31

Diodeus - James MacFarlane · Accepted Answer · 2012-06-01 14:18:57Z

3

Put two DIVs in each TD, one absolutely-positioned to display the value, the other for the bar. Use a simple CSS3 gradient background on the bar.

answered Jun 1, 2012 at 14:18

Diodeus - James MacFarlane

115k33 gold badges164 silver badges180 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

davids · Accepted Answer · 2012-06-01 14:23:59Z

1

coloring the cells based on value should be pretty simple with js.

I have never seen the bars in an html table, but here is one possible direction: Each td contains an input for the user to enter a value and a floating div. When the user updates the value, use js to set the width of the floating div to the appropriate percentage.

Things to consider:

Set the Z-index of the input higher than the floating div
Make sure the floating div can be clearly and easily identified so js knows which to update

answered Jun 1, 2012 at 14:23

davids

5,60712 gold badges60 silver badges96 bronze badges

Comments

Huangism · Accepted Answer · 2012-06-01 14:27:54Z

1

yes you can achieve this with html/css/js. I recommend you use jquery (as it is still js), you can get the numbers and calculate the percentages then add a class for the bars

answered Jun 1, 2012 at 14:27

Huangism

16.5k7 gold badges51 silver badges75 bronze badges

Collectives™ on Stack Overflow

Creating a complex HTML table

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related