Question

Here is my attempt. The width of each column is not the same, how can I fix that?

Have you a better suggestion on how to do a scale using div instead of table?

<TABLE BORDER=1 CELLSPACING=2 CELLPADDING=10 border-style=outset>
    <TR>
    <TD BGCOLOR="#ffffff">
    <TD BGCOLOR="#ffcccc">
    <TD BGCOLOR="#ff8888">
    <TD BGCOLOR="#ff4444">
    <TD BGCOLOR="#ff0000">
    </TR>
    <TR>
    <TD id="a">20</TD>
    <TD id="b">40</TD>
    <TD id="c">60</TD>
    <TD id="d">80</TD>
    <TD id="e">100</td>
    </TR>
</table>

Answer 1

This fiddle will show you one way to create scaling areas: http://jsfiddle.net/aL2ME/

You simply adjust the width property of the nested divs to the appropriate percentage.