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

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/

Answer 2

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 3

Here is a good example:

<label>0</label>
<label>100</label>
<label>200</label>
       ...

https://codepen.io/cfenzo/pen/jEGQGm

or another example

https://codepen.io/pbweb/pen/grQKEK

Answer 4

A static answer:

<pre>
|____|____|____|____|
0    1    2    3    4
</pre>

To be able to change it, use JavaScript.

Answer 5

Check this out: http://jsfiddle.net/thirdender/kwcug/

<ul class="ruler"><li>1</li><li>2</li><li>3</li><li>4</li></ul>

<div>
    <ul class="ruler" data-items="10"></ul>
</div>

Looks more fancy and can be easily customized.