JSFiddle - React, Tailwind, and code Playground

HTML

<table id="chart">
  <thead>
    <tr>
      <th>Alpha %</th>
      <th>Hex</th>
      <th>Num</th>
    </tr>
  </thead>
</table>

CSS

table {
  border-collapse: collapse;  
}
tr {
  border: 1px solid #ccc;
}
th, td {
  padding: 3px 10px;
}
body {
  padding: 10px;
}

JavaScript

var text = document.getElementById('chart');

var tableguts = "";

for (var i = 1; i >= 0; i -= 0.01) {
  i = Math.round(i * 100) / 100;
  var alpha = Math.round(i * 255);
  var hex = (alpha + 0x10000).toString(16).substr(-2).toUpperCase();
  var perc = Math.round(i * 100);
  tableguts += `
        <tr>
          <td> ${perc} % </td>
          <td> ${hex} </td>
          <td> ${alpha} </td>
        </tr>
      `
}

text.innerHTML += tableguts;