placing two tables one under another

I have a function which will create a table dynamically

 function createDynamicTable(tbody, rows, cols)
 {
     if (tbody == null || tbody.length < 1) return;
     for (var r = 1; r <= rows; r++) 
     {
          var trow = $("<tr>");
          for (var c = 1; c <= cols; c++)
          {
              var cellText="hello World ";
              //var cellText=$.newWindow();
              $("<td>").addClass("tableCell")
                       .text(cellText)
                       .data("col", c)
              开发者_运维技巧         .appendTo(trow);
           }
           trow.appendTo(tbody);
      }
 }   

and I'm calling

$("#tbl").height("65%");
$("#tbl2").height("30%")
createDynamicTable($("#tbl"),2, 3);
createDynamicTable($("#tbl2"),1, 1);

html is just

<table id="tbl" border="1" align="center" height="95%" width="100%" >
    <table id="tbl2" border="1" align="center" height="95%" width="100%" >

two tables are creating but they coming side by side.But i one under anotherlike table1 is on top and table2 is below.Any new line logic.

<table id="tbl" border="1" align="center" height="95%" width="100%" ><br/>
<table id="tbl2" border="1" align="center" height="95%" width="100%" >

and the function

 function createDynamicTable(tbody, rows, cols)
 {
     if (tbody == null || tbody.length < 1) return;
     for (var r = 1; r <= rows; r++) 
     {
          var trow = $("<tr/>");
          for (var c = 1; c <= cols; c++)
          {
              var cellText="hello World ";
              //var cellText=$.newWindow();
              $("<td/>").addClass("tableCell")
                       .text(cellText)
                       .data("col", c)
                       .appendTo(trow);
           }
           trow.appendTo(tbody);
      }
 }   

here is the fiddle http://jsfiddle.net/sLrRw/

The tables should automatically be on top of one another if you make sure one of these style rules are applied to the <table> elements:

display: block;

Or...

display: table;