html - Is it possible to place a character on a border line displayed in a table? -

is possible place character on border line displayed in table?

i trying discover way re-create musical staff notation webpages using html rather inserting images.

i have got staff render fine, 5 horizontal lines divided vertical bars using in css header:

table.musstaff{border-collapse:collapse;} .trms{border-bottom:2px solid black;} .tdms{border-left:2px solid black;} 

and need render musical staff:

<table class="musstaff">     <tr><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td></tr>     <tr class="trms"><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td></tr>     <tr class="trms"><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<td class="tdms">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<td class="tdms">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td></tr>     <tr class="trms"><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<td class="tdms">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<td class="tdms">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td></tr>     <tr class="trms"><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<td class="tdms">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<td class="tdms">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td></tr>     <tr class="trms"><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<td class="tdms">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<td class="tdms">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td></tr>     <tr><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td></tr> </table> 

all   merely included temporary place holders.

so problem need able place &#9679 chars representing notes on lines between lines, rendered <tr class="trms"> (border-bottom:2px solid black).

other think go.

is trying achieve?

html

<div><span>o</span></div> 

css

div {     border-right: 1px solid black;     display: inline-block;     font-size: 20px;     line-height: 20px;     height: 1em;     position: relative;     width: 1em; }  span {     position: absolute;     right: -5px; } 

jsfiddle