Csaba Skrabák - 2021-09-29 
<html>
<head>
    <style>
        #guitar {
            border-spacing: 0;
            border-width: 6px 1px 1px 1px;
            border-style: solid;
            border-color: black;
            margin: 0;
            padding: 0;
        }

        #guitar th, #guitar th div {
            width: 0;
            padding: 0;
            overflow: visible;
            text-align: center;
            pointer-events: none;
            font-size: 12px;
        }

        #guitar td {
            width: 12px;
            background-repeat: repeat-y;
            background-color: white;
            background-position: center;
            border-width: 0 0 2px 0;
            border-style: solid;
            border-color: black;
            margin: 0;
            padding: 0;
            vertical-align: bottom;
            text-align: center;
            font-size: 12px;
            line-height: 14px;
            cursor: pointer;
        }
    </style>
    <script>
        var fretDistance = [ 
            47,
            45,
            42,
            40,
            38,
            35,
            34,
            31,
            30,
            28,
            26,
            25,
            23,
            22,
            21,
            20,
            18,
            18,
            17,
            16 ]

        var pearl = [ "", "", "", "", "&#x25EF;", 
        "", "&#x25EF;", "", "&#x25EF;", "", 
        "", "&#x25EF;&nbsp;&#x25EF;", "", "", "&#x25EF;",
        "", "", "", "", ""]

        function genGuitar() {
          for (var i = 0; i < fretDistance.length; ++i) {
            var tr = document.createElement("tr")

            for(var s = 0; s < 6; ++s) {
              var td = document.createElement("td")
              td.style.height = fretDistance[i] + "px"
              td.style.backgroundImage = "url('blackdot" + (s <= 2 ? "3" : "2") + ".png')"
              td.onmouseover = function() {
                event.target.innerHTML = "&#x2B24;"
              }
              td.onmouseout = function() {
                event.target.innerHTML = "&nbsp;"
              }

              tr.appendChild(td)

              if (s == 2) {
                var th = document.createElement("th")
                tr.appendChild(th)

                switch (i) {
                    case 11:
                        th.innerHTML = '<div style="position: relative; left: -24px">&#x25EF;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#x25EF;</div>'
                        break
                    case 4:
                    case 6:
                    case 8:
                    case 14:
                        th.innerHTML = '<div style="position: relative; left: -6px">&#x25EF;</div>'
                        break
                }
              }
            }

            guitar.appendChild(tr)
          }
        }
    </script>
</head>
<body onload="genGuitar()">
    <table id="guitar">
    </table>
</body>
</html>
 

Last edit: Csaba Skrabák 2021-09-30