title: Not showing borders of table
body: <p>I have written the following code (ES6) to show a bunch of things in a JSON file within a table: </p>
  
  <pre><code>var tablesGlobal2 = 
  [
    {"titleRow":[{"string":"Country","alignment":-1},{"string":"Hemisphere","alignment":2}],
    "contentMatrix":[[{"string":"USA","alignment":-1},{"string":"North","alignment":2}],[{"string":"Brazil","alignment":0},{"string":"South","alignment":0}]]},
    {"titleRow":[{"string":"Season","alignment":0},{"string":"Month","alignment":0}],
    "contentMatrix":[[{"string":"Spring","alignment":-1},{"string":"March","alignment":-1}],[{"string":"Spring","alignment":1},{"string":"April","alignment":-1}],[{"string":"Spring","alignment":0},{"string":"May","alignment":2}],[{"string":"Summer","alignment":2},{"string":"June","alignment":2}],[{"string":"Summer","alignment":0},{"string":"July","alignment":0}],[{"string":"Summer","alignment":1},{"string":"August","alignment":2}],[{"string":"Fall","alignment":0},{"string":"September","alignment":0}],[{"string":"Fall","alignment":-1},{"string":"October","alignment":-1}],[{"string":"Fall","alignment":1},{"string":"November","alignment":0}],[{"string":"Winter","alignment":-1},{"string":"December","alignment":2}],[{"string":"Winter","alignment":-1},{"string":"January","alignment":0}],[{"string":"Winter","alignment":2},{"string":"February","alignment":-1}]]}
  ];
  
  class SampleApplication extends React.Component {
    constructor(props) {
      super(props);
      this.state = { tables: tablesGlobal2 };
    }
    ShowRowsOfATable(row) { 
      var rows = [];
      row.forEach(function(cell) {
        rows.push(&lt;td&gt; {JSON.stringify(cell.string)} &lt;/td&gt; );
      }); 
      return ( {rows} );
    }
    ShowATable(table) { 
      var rows = [];
      var self = this;
      table.contentMatrix.forEach(function(row) {
        var goo = &lt;tr&gt; {self.ShowRowsOfATable(row)} &lt;/tr&gt;;
        rows.push(goo);
      }); 
      return (&lt;table&gt; {rows} &lt;/table&gt;);  
    } 
  
    ShowTables(tables) {
      var self = this;
      var rows = [];
      tables.forEach(function(table) {
        rows.push( self.ShowATable(table) );
      });  
  
      var tableRows = &lt;div&gt;{rows}&lt;/div&gt;;
      return (
        &lt;div&gt;  
          {tableRows} 
        &lt;/div&gt; 
        ); 
    }
    render() {
      var ts = this.ShowTables(this.state.tables);
      return ( &lt;div&gt; {ts} &lt;/div&gt; );
    }
  }
  
  React.render(&lt;SampleApplication /&gt;, document.body);
  </code></pre>
  
  <p>Here is a sample output: <a href="https://jsfiddle.net/danyaljj/0rb0uo8a/" rel="nofollow noreferrer">https://jsfiddle.net/danyaljj/0rb0uo8a/</a> 
  <img src="https://i.stack.imgur.com/IP5HA.png" alt="enter image description here"></p>
  
  <p>I want to add specifications to the table. For example when I change <code>&lt;table&gt;</code> to <code>&lt;table border="10"&gt;</code> the output still does not change. Similarly, when I change <code>&lt;td&gt;</code> to <code>&lt;td bgcolor="#FF0000"&gt;</code>. </p>
  
  <p>Any idea where I am doing it wrong? </p>