Table AY

Google VIsualization Table + CSS

by thiscode

HTML

<script src="http://www.google.com/jsapi?fake=.js"></script>
<div id='table_div'></div>

CSS

body {background-color:#b0c4de;}

.lalala{
    font: bold 18px Arial ;
    text-align: center ;
    background-color: #7296CE;
    width: 10px;
}

.hahaha{
    font: normal 14px Arial ;
    text-align: left ;
    background-color: #9FB7DD;
    border:0;
    border-style: inset; 
    width: 10px;

}

.nobackground{
    background-color: transparent; 
}

.noborder, .cell_left{
    border: 0;
    text-align: center;
}


.hovercolor{
   background-color: black;  
}

JavaScript

google.load('visualization', '1', {
          packages: ['table']
      });
      google.setOnLoadCallback(drawTable);

      function drawTable() {
          var data = new google.visualization.DataTable();
          data.addColumn('string', 'Name');
          data.addColumn('number', 'Value');
          data.addRows([
              ['Germany', 700],
              ['USA', 300],
              ['Brazil', 400],
              ['Canada', 500],
              ['France', 600],
              ['Russia', 800]
          ]);

          var cssClassNames = {
                  'headerRow': '',
                  'tableRow': 'nobackground',
                  'oddTableRow': 'nobackground',
                  'selectedTableRow': '',
                  'hoverTableRow': 'hovercolor',
                  'headerCell': 'lalala',
                  'tableCell': 'noborder cell_left nobackground',
                  'rowNumberCell': ''
          };

          var table = new google.visualization.Table(document.getElementById('table_div'));
          table.draw(data, {
              'cssClassNames': cssClassNames,
              'allowHtml': true,
              'width': 300
              
          });
      }