<table id="chart">
  <thead>
    <tr>
      <th>Hex</th>
     
      <th>Alpha %</th>
    </tr>
  </thead>
</table>
table {
  border-collapse: collapse;  
}
tr {
  border-bottom: 1px solid #ccc;
}
th, td {
  padding: 3px 10px;
}
body {
  padding: 10px;
}
var text = document.getElementById('chart');

var tableguts = "";

for(var alpha=0; alpha< 256; alpha ++){
  var hex =  (alpha + 0x10000).toString(16).substr(-2).toUpperCase();
  var perc = Math.round(alpha*1000/255)/10;
  tableguts += "<tr><td>" + hex + "</td><td>" + perc + "%</td></tr>";
}

text.innerHTML += tableguts;
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.