title: How to create a table using a loop?
body: <p>The individual table rows are giving me a problem. I have created what I want using divs but I need to use a table instead of divs. My table has 220 cells, 10 rows, and 22 columns. Each cell has to have the value of <code>i</code> inside the <code>innerHTML</code>. Here is similar to what i want using Divs ( although the cell height and width does not have to be set ):</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;style&gt;
              #container{ 
              width:682px; height:310px; 
              background-color:#555; font-size:85%;
              }
  
              .cell { 
              width:30px; height:30px;
              background-color:#333; color:#ccc;
              float:left; margin-right:1px;
              margin-bottom:1px;
              }
          &lt;/style&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;div id="container"&gt;
              &lt;script&gt;
                  for( var i = 1; i &lt;= 220; i++ ){
                      document.getElementById( 'container' ).innerHTML += 
                      '&lt;div class="cell"&gt;' + i + '&lt;/div&gt;'
                  }
              &lt;/script&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/8r6619wL/" rel="nofollow">http://jsfiddle.net/8r6619wL/</a></p>
  
  <p>This is my starting attempt using a table:</p>
  
  <pre><code>&lt;script&gt;
      for( var i = 0; i &lt;= 10; i++ )
      {
          document.getElementById( 'table' ).innerHTML +=
          '&lt;tr id = "row' + i + '"&gt;&lt;td&gt;...&lt;/td&gt;&lt;/tr&gt;';
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>But that code somehow dynamically creates a bunch of tbody elements. Thanks for help as I newb</p>