Table generator Jquery.

<style type="text/css">

body {
background: oldlace;
font-family: verdana;
}

select {
margin-right:40px;
}

td, th, table {
border:  solid 1px;
border-collapse: collapse;
padding: 5px;
padding-left: 10px;
padding-right: 10px;
text-align: center;
}

</style>

<script type="text/javascript" src="jquery-1.11.1.min.js"></script>

<span id="cols">Columns:</span>

<select id="coluna">
    <option disabled selected>Select</option>
    <option>0</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
</select>
<span class="ros">Rows:</span>

<select id="fila">
    <option disabled selected>Select</option>
    <option>0</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
</select>
<button class="criar">Generate</button>
<br><br>
<table id="tabelas"></table>

<script type="text/javascript">

$(document).ready(function () {
 
    String.prototype.repeat = function(n) {
        return new Array(n + 1).join(this);
    }
 
    $('.criar').click(function () {
        $('table').empty();
        var col = parseInt($('#coluna').val());
        var row = parseInt($('#fila').val());
        var Head = "<th>Heading</th>".repeat(row);
        var tableHead = "<tr>" + Head + "</tr>"
        var tableData = "<td>Details</td>".repeat(row);
        var tableRow = "<tr>" + tableData + "</tr>";
        var table = tableRow;
     
        $('#tabelas').append(tableHead);
     
        for (i = 0; i < col; i++) {
            $('#tabelas tr:last').after(table);
        }
    });
});

</script>


Output :)

1)

2)