[Dilettante_Pro]

вариант оформления. ТС, ау!!!

<style>
  td { position:relative;
        width:20px;
        height:30px;
        padding: 0px;
  }
  td div.back {
        position:absolute;
        top:0px;
        left:0px;
        width:100%;
        height:100%;
  }
</style>
Процент<input type='text'/>
<table>
  <tr>
    <td><div class="back"></div></td>
  </tr>
  <tr>
    <td><div class="back"></div></td>
  </tr>
  <tr>
    <td><div class="back"></div></td>
  </tr>
  <tr>
    <td><div class="back"></div></td>
  </tr>
  <tr>
    <td><div class="back"></div></td>
  </tr>
  <tr>
    <td><div class="back"></div></td>
  </tr>
  <tr>
    <td><div class="back"></div></td>
  </tr>
  <tr>
    <td><div class="back"></div></td>
  </tr>
  <tr>
    <td><div class="back"></div></td>
  </tr>
  <tr>
    <td><div class="back"></div></td>
  </tr>
  <tr>
    <td><div class="back"></div></td>
  </tr>
</table>
<script>
document.querySelector('input').onchange = function() {
  var percent = +this.value;
  var arr = document.querySelectorAll('td');
  for(var i = 0;i < arr.length ;i++) {
     arr[i].firstChild.style.backgroundColor = "white";
  }
  for(var i = 0;i < ((arr.length * (percent - 5)) / 100) ;i++) {
     arr[i].firstChild.style.backgroundColor = "red";
  }
}
</script>