Rendering inside <table> tag

I'm having a issue with order of table elements when rendering:

File: index.html

<!doctype html>
<html>
  <head>
    <meta charset='utf-8'>
    <title>Products</title>
  </head>
  <body>
    <h1>Products List</h1>
    <table border='1'>
      <tr>
        <th>Title</th>
        <th>Description</th>
        <th>Style</th>
      </tr>
      <div id='main'></div>
    </table>
    <script src='javascript/jquery.js'></script>
    <script src='javascript/sammy.js'></script>
    <script src='javascript/sammy.template.js'></script>
    <script src='javascript/products.js'></script>
  </body>
</html>

File: products.js

(function($){
  var app = $.sammy(function(){
    this.element_selector = '#main';
    this.use('Template');
    this.get('#/', function(context){
      context.log('Route #/');
      this.load('data/items.json')
        .then(function(items){
      $.each(items, function(i, item){
        context.render('templates/item.template', {id: i, item: item})
              .appendTo(context.$element());
        });
      });
    });
  });
  $(function(){
    app.run('#/');
  });
})(jQuery);

File: item.template

<tr>
  <td><%= item.title %></td>
  <td><%= item.description %></td>
  <td><%= item.style %></td>
</tr>

When rendering the table, elements stay below elements

products

quirkey / sammy

Rendering inside <table> tag #186