title: Getting loop data aligned properly in a table?
body: <p>I'm practicing right now.  I understand how to do the loops, but I can't get the data aligned properly</p>
  
  <pre><code>&lt;html lang = "en"&gt;
  
      &lt;head&gt;
          &lt;title&gt;Javascript practice&lt;/title&gt;
          &lt;link rel ="stylesheet" href = "css/foundation.min.css"&gt;&lt;/link&gt;
  
          &lt;style type = "text/css"&gt;
           table         { width: 300px;
                           border-collapse:collapse; 
                           background-color: lightblue; }
           table, td, th { border: 1px solid black; 
                           padding: 4px; }
           th            { text-align: left; 
                           color: white;
                           background-color: darkblue; }
           tr.oddrow     { background-color: white; }
        &lt;/style&gt;
      &lt;/head&gt;
  
  
      &lt;body&gt;
  
  
  
          &lt;! -- JavaScript --&gt;
          &lt;script type = "text/javascript"&gt;
  
              var ALEast   =  ["Yankees", "Red Sox", "Orioles", "Rays", "Blue-Jays"];
  
  
              var count = 1;
  
              document.write('&lt;table border = "3"&gt;');
  
  
              document.write('&lt;thead style = "height:100px;"&gt;&lt;tr&gt;&lt;th&gt;N&lt;/th&gt;&lt;th&gt;10*N&lt;/th&gt;&lt;th&gt;100*N&lt;/th&gt;&lt;th&gt;1000*N&lt;/th&gt;&lt;/thead&gt;');
  
  
  
  
  
  
  
  
              for(var i = 0; i &lt; ALEast.length; i++)
                  {
  
                      document.write('&lt;tr&gt;&lt;td&gt;' + ALEast[i] + '&lt;/td&gt;&lt;/tr&gt;');
  
                  }   
  
              for(var count = 1; count &lt;= 6; count++)
                  {
                      document.write('&lt;tr&gt;&lt;tr&gt;&lt;td&gt;&lt;td&gt;' + count + '&lt;/tr&gt;&lt;&lt;/td&gt;&lt;/td&gt;');
                  }
  
  
          document.write('&lt;/table&gt;');
  
  
  
          &lt;/script&gt;
          &lt;!-- End JavaScript --&gt;
  
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I want my count loop, numbers 1 through 6 to go directly underneath my 10*N header.  But I can't get it there.  If you run my code, you'll see it's in the second column, but too low, and not directly to the right of "Yankees".</p>
  
  <p>So basically I want the number 1 to be directly to the right of Yankees, and 2, 3, 4, 5 and 6 listed underneath.  </p>