<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['table']});
      google.charts.setOnLoadCallback(drawTable);

      function drawTable() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Grade');
        data.addColumn('string', 'Score');
        data.addColumn('string', 'Facility Quality');
        data.addColumn('string', 'Description')
        data.addRows([
          ['A+', '4.0', 'Excellent','New or near new condition of all components of systems. No corrective actions are required.'],
          ['A+', '3.75-3.99', 'Excellent','New or near new condition of all components of systems. No corrective actions are required.'],
          ['A-', '3.5-3.74', 'Excellent','New or near new condition of all components of systems. No corrective actions are required.'],
          ['B+', '3.25-3.49', 'Satisfactory','Generally good condition with minor corrective actions required for some systems. Corrective actions are required but not urgent.'],
          ['B', '2.75-3.24', 'Satisfactory','Generally good condition with minor corrective actions required for some systems. Corrective actions are required but not urgent.'],
          ['B-', '2.50-2.74', 'Satisfactory','Generally good condition with minor corrective actions required for some systems. Corrective actions are required but not urgent.'],
          ['C+', '2.25-2.49', 'Borderline','Fair condition with some corrective actions required for some systems. Some urgency is involved for corrective actions.'],
          ['C', '1.75-2.24', 'Borderline','Fair condition with some corrective actions required for some systems. Some urgency is involved for corrective actions.'],
          ['C-', '1.5-1.74', 'Borderline','Fair condition with some corrective actions required for some systems. Some urgency is involved for corrective actions.'],
          ['D+', '1.25-1.49', 'Poor','The majority of systems are in poor condition and require corrective actions. Most corrective actions require immediate attention.'],
          ['D', '0.75-1.24', 'Poor', 'The majority of systems are in poor condition and require corrective actions. Most corrective actions require immediate attention.'],
          ['D-', '0.50-0.74','Poor', 'The majority of systems are in poor condition and require corrective actions. Most corrective actions require immediate attention.'],
          ['F', '0.49 & Below','Inadequate', 'Virtually all systems are broken or inoperative. Most cannot be repaired easily. If repairable, costs to do so are prohibitive or exceed full replacement cost.'],
        ]);

        var table = new google.visualization.Table(document.getElementById('table_div'));

        var formatter = new google.visualization.BarFormat({width: 100});
        formatter.format(data, 1); // Apply formatter to second column
        
        table.draw(data, {allowHtml: true, showRowNumber: false, width: '100%', height: '100%'});
      }
    </script>
  </head>
  <body>
    <div id="table_div"></div>
  </body>
</html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.