TABLES - CSS: Professional Techniques for Modern Layout - page 222

Rendered in a browser, the raw data looks like Figure 6-16.
Turning this table into a chart is really straightforward. All you need to do is place each day in
the proper place and then scale up the table cells to the necessary height. Simple!
224
Figure 6-16: The table in the raw.
Okay, so maybe it's not quite that easy. But as you'll see, it's not that complex either. First, set
the area in which you're going to work.
table , table * { outline : 1px dotted red ;}
table { display : block ; position : relative ;
height : 300px ; width : 600px ;
font : small sans-serif ;}
h e height and width could really be any set of measures, but the pixels make it easier to
explain certain mathy bits as you go along. Rest assured, however, that nothing you do will
require the use of pixels. When done, you'll be able to change those values to whatever you
want and still have the data be graphed. h e outline rule is temporary, existing only so you
can see what you're doing as you go.
Now start positioning everything in the table.
tr , th , td { display : block ; position : absolute ;}
tbody tr { left : 0 ; bottom : 0 ; width : 10% ; height : 100% ;}