How to make a ruler scale in HTML and CSS

Question

I would like to draw something simple like this using HTML and CSS:

|_____|_____|_____|_____|

with aligned numbers underneath each vertical bar, e.g. 0, 1, 2, 3, 4 etc.

I would also like to adjust the space between bars programmatically. Is there any example I can follow?

Answer 1

Here are some CSS on-screen rulers in a fiddle :-p There are probably better/fancier ways to set the spacing, but I included a simple example that loops through and adjusts the salient values.

Answer 2

I try never to preach using tables for non-tabular data, but you could just do it using a table:

<table width=100% style='font-family: monospace;'>
    <tr style='border-bottom: 1px solid #000;'>
        <td>
            |
        </td><td>
            |
        </td><td>
            |
        </td><td>
            |
        </td><td width=1%>
            |
        </td>
    </tr>
    <tr>
        <td>
            0
        </td><td>
            1
        </td><td>
            2
        </td><td>
            3
        </td><td>
            4
        </td>
    </tr>
</table>

A fiddle: http://jsfiddle.net/ZH7Lx/