title: Create two column HTML table in javascript from two dimensional array
body: <p>In my code:</p>
  
  <pre><code>function addTable(){
    var timestamp = ["Mon", "Tues", "Wed", "Thurs", "Fri", "Sat", "Sun"];
    var value =[1,2,3,4,5,6,7]
  
    var items = [timestamp, value]; 
  
    var tableDiv = document.getElementById("table2"); 
    var table = document.createElement('TABLE');
    var tbody= document.createElement('TBODY');  
    var tr = document.createElement('TR');
  
    table.appendChild(tbody);
  
        //create header
        tbody.appendChild(tr);
        var heading = ["Timestamp", "Value"];
        for (var col = 0; col&lt;heading.length; col++){
          var th = document.createElement('TH');
          th.width = '75';
          th.appendChild(document.createTextNode(heading[col]));
          tr.appendChild(th);
        }
  
        //create rows for each stock[i] length
        for (var f=0; f &lt; items[i].length; f++){
         var tr = document.createElement('TR');
       }
       for (i = 0; i &lt; items.length; i++) {
        for (j = 0; j &lt; items[i].length; j++) {
          var td = document.createElement('TD')
          td.appendChild(document.createTextNode(items[i][j]));
          tr.appendChild(td);
        }
        tbody.appendChild(tr);
      }
      tableDiv.appendChild(table);
    }
  </code></pre>
  
  <p>I created a 2d array populated with two arrays(timestamp and value).
  The problem with this code is that it only generates a single row with the timestamp content listed, then the value content listed afterwards. What I wanted to create was a table where each row has the timestamp and it's respective value.
  Row 1 would be "Mon" in the first cell and then "1" in the second cell/column.
  Row 2 would be "Tues" in the first cell and then "2" in the second cell/column.</p>
  
  <p>What am I doing incorrectly in this code?</p>
  
  <p>Also, in my actual code the arrays are dynamically made, so there is an unknown length for the timestamp and value arrays.  </p>