title: Javascript using document.createElement() and node .appendChild() with <table>
body: <p>So I'm trying to figure out a way to join the rows and table cells together using document.createElement() and node.appendChild() but I am a bit new to these commands. </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html onmousedown='event.preventDefault();'&gt;
  &lt;head&gt;
  &lt;title&gt; Boxes &lt;/title&gt;
  &lt;meta charset='utf-8'&gt;
  &lt;style&gt;
  
    table {
     border-spacing: 6px;
     border: 1px rgb(#CCC);
     margin-top: .5in;
     margin-left: 1in;
     }
  
    td {
     width: 40px; height: 40px; 
     border: 1px solid black;
     cursor: pointer;
     }
  
   &lt;/style&gt;
   &lt;script&gt;
  
  function colorize(el) {
    var
      r = ('0'+(Math.random()*255|0).toString(16)).slice(-2),
      g = ('0'+(Math.random()*255|0).toString(16)).slice(-2),
      b = ('0'+(Math.random()*255|0).toString(16)).slice(-2);
      el.style.backgroundColor = '#' +r+g+b;
      }
    &lt;/script&gt;
  </code></pre>
  
  <p>Fill in the table body tbody element identified with the id 'tb', making it a 16x16 table using document "create element" and "node append child" methods to create the rows and table cells and join them together. </p>
  
  <p>I know it will need something like "document body append Child(k)" along with a var to reflect the proper creating like  "var k = document create element"</p>
  
  <pre><code>&lt;/head&gt;
  &lt;body onload='maketable();'&gt;
  &lt;table&gt;
  &lt;tbody id='tb'&gt;
  
  &lt;script type="text/javascript"&gt;
  
  
  var row = 16;
  var cols = 16;
  
   for(var r=0;r&lt;row;r++){
    document.write("&lt;/tr&gt;");
  
   for(var c=0;c&lt;cols;c++){
    document.write("&lt;td onMouseEnter='colorize(this);'&gt;&lt;/td&gt;"); 
    }
    document.write("&lt;/tr&gt;");
    }
  
  &lt;/script&gt;
  
  &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>