title: Table generator Jquery
body: <p>I'm trying to make a dynamic table generator with html/CSS/jQuery; I don't have much so far but can you have a look and help me out?</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;span id="cols"&gt;Columns:&lt;/span&gt;
  
  &lt;select id="coluna"&gt;
      &lt;option disabled selected&gt;Select&lt;/option&gt;
      &lt;option&gt;0&lt;/option&gt;
      &lt;option&gt;1&lt;/option&gt;
      &lt;option&gt;2&lt;/option&gt;
      &lt;option&gt;3&lt;/option&gt;
      &lt;option&gt;4&lt;/option&gt;
      &lt;option&gt;5&lt;/option&gt;
      &lt;option&gt;6&lt;/option&gt;
      &lt;option&gt;7&lt;/option&gt;
      &lt;option&gt;8&lt;/option&gt;
      &lt;option&gt;9&lt;/option&gt;
      &lt;option&gt;10&lt;/option&gt;
  &lt;/select&gt;
  &lt;span class="ros"&gt;Rows:&lt;/span&gt;
  
  &lt;select id="fila"&gt;
      &lt;option disabled selected&gt;Select&lt;/option&gt;
      &lt;option&gt;0&lt;/option&gt;
      &lt;option&gt;1&lt;/option&gt;
      &lt;option&gt;2&lt;/option&gt;
      &lt;option&gt;3&lt;/option&gt;
      &lt;option&gt;4&lt;/option&gt;
      &lt;option&gt;5&lt;/option&gt;
      &lt;option&gt;6&lt;/option&gt;
      &lt;option&gt;7&lt;/option&gt;
      &lt;option&gt;8&lt;/option&gt;
      &lt;option&gt;9&lt;/option&gt;
      &lt;option&gt;10&lt;/option&gt;
  &lt;/select&gt;
  &lt;button class="criar"&gt;Generate&lt;/button&gt;
  &lt;div id="tabelas"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>body{
    background:oldlace;
    font-family: "Eurostile LT Std";
  }
  
  select{
    margin-right:40px;
  }
  </code></pre>
  
  <p>JQuery</p>
  
  <pre><code>$(document).ready(function(){
  
    var col = $('#coluna').val();
    var row = $('#fila').val();
    var tabela = ("&lt;table&gt;" + "&lt;/table&gt;");
    var colunatabela = ("&lt;tr&gt;&lt;/tr&gt;");
    var titulotabela = ("&lt;th&gt;&lt;/th&gt;");
    var ceclulatabela = ("&lt;td&gt;&lt;/td&gt;");
  
  
    $('.criar').click(function(){  
  
      $(tabela).appendTo('#tabelas').then(function(){
        $(colunatabela).appendTo(tabela);
      });
  
  
  
    });
  
  });
  </code></pre>
  
  <p>The idea is that the person inputs how many columns and rows he wants and the jQuery will add to the <i>tabelas</i> div a table and then the said columns and rows from values of the options selectors... Help please?</p>
  
  <p>Here is a <a href="http://codepen.io/angus/pen/zmLcd/" rel="nofollow noreferrer">PEN</a> with the project.</p>