How to change color on a Google Visualization table using only HTML in Wordpress?-CodePudding

I'm trying to figure out how to change color on all text in a google visualization table in wordpress using only HTML.

I've found multiple answers on stackoverflow, but nothing referring to using only HTML.

Thanks in advance!


<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', 'Name');
        data.addColumn('number', 'Salary');
        data.addColumn('boolean', 'Full Time Employee');
        data.addRows([
          ['Mike',  {v: 10000, f: '$10,000'}, true],
          ['Jim',   {v:8000,   f: '$8,000'},  false],
          ['Alice', {v: 12500, f: '$12,500'}, true],
          ['Bob',   {v: 7000,  f: '$7,000'},  true]
        ]);

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

        table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
      }
    </script>
  </head>
  <body>
    <div id="table_div"></div>
  </body>
</html>

The example is taken from https://developers.google.com/chart/interactive/docs/gallery/table Code is licensed under:https://www.apache.org/licenses/LICENSE-2.0

Edit: cooldogyum's answer worked! I was pasting the stylecode on the wrong place in the "HTML code" block.

<style>
 #table_div {
  color: red;
 }
</style>

Here's what the final working code looks like. Thanks for your help, both of you!


  
 <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', 'Name');
        data.addColumn('number', 'Salary');
        data.addColumn('boolean', 'Full Time Employee');
        data.addRows([
          ['Mike',  {v: 10000, f: '$10,000'}, true],
          ['Jim',   {v:8000,   f: '$8,000'},  false],
          ['Alice', {v: 12500, f: '$12,500'}, true],
          ['Bob',   {v: 7000,  f: '$7,000'},  true]
        ]);

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

        table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
      }
    </script>

<style>
 #table_div {
  color: red;
 }
</style>

  </head>
  <body>
    <div id="table_div" style="“color:" red;”=""></div>
  </body>
</html>

CodePudding user response：

HTML (Hypertext Markup Language) cannot be used (on its own) to modify the appearance of a page. HTML is purely used to define the meaning and structure of web content. I believe you’re meaning to reference CSS (Cascading Style Sheets) which is used to affect the appearance of web content. If you’re looking to change the color of text you can use the CSS color property.

<style>
 #table_div {
  color: red;
 }
</style>

Inline: <div id="table_div" style=“color: red;”></div>