Use table for mods list

public/js/app/views/mods/list.js

@@ -1,15 +1,19 @@
 define(function (require) {
-  
+
   "use strict";
-  
+
   var $                   = require('jquery'),
       _                   = require('underscore'),
       Backbone            = require('backbone'),
       Marionette          = require('marionette'),
-      ListItemView        = require('app/views/mods/list_item');
-  
-  return Marionette.CollectionView.extend({
-    tagName: 'ul',
+      ListItemView        = require('app/views/mods/list_item'),
+      tpl                 = require('text!tpl/mods/list.html'),
+
+      template = _.template(tpl);
+
+  return Marionette.CompositeView.extend({
     itemView: ListItemView,
+    itemViewContainer: "tbody",
+    template: template,
   });
 });

public/js/app/views/mods/list_item.js

@@ -1,17 +1,17 @@
 define(function (require) {
-  
+
   "use strict";
-  
+
   var $                   = require('jquery'),
       _                   = require('underscore'),
       Backbone            = require('backbone'),
       Marionette          = require('marionette'),
       tpl                 = require('text!tpl/mods/list_item.html'),
-      
+
       template = _.template(tpl);
-  
+
   return Marionette.ItemView.extend({
-    tagName: "li",
+    tagName: "tr",
     template: template
   });
 });

public/js/tpl/mods/list.html

@@ -0,0 +1,10 @@
+<table class="table table-striped">
+  <thead>
+    <tr>
+      <th>Mod</th>
+    </tr>
+  </thead>
+
+  <!-- want to insert collection items, here -->
+  <tbody></tbody>
+</table>

public/js/tpl/mods/list_item.html

@@ -1 +1,3 @@
-<a href='#mods/<%-name%>'><%-name%></a>
+<td>
+  <a href='#mods/<%-name%>'><%-name%></a>
+</td>