Edit in JSFiddle

// A Grid Row
var GridRow = Backbone.Marionette.ItemView.extend({
    template: "#row-template",
    tagName: "tr"
});

// The grid view
var GridView = Backbone.Marionette.CompositeView.extend({
    tagName: "table",
    template: "#grid-template",
    childView: GridRow,
    
    appendHtml: function(collectionView, itemView){
        collectionView.$("tbody").append(itemView.el);
    }
});

// ----------------------------------------------------------------
// Below this line is normal stuff... models, templates, data, etc.
// ----------------------------------------------------------------
var userData = [
    { username: "dbailey", fullname: "Derick Bailey" },
    { username: "jbob", fullname: "Joe Bob" },
    { username: "fbar", fullname: "Foo Bar" }
];

var User = Backbone.Model.extend({});

var UserCollection = Backbone.Collection.extend({
    model: User
});

var userList = new UserCollection(userData);

var gridView = new GridView({
    collection: userList
});

gridView.render();
console.log(gridView.el);
$("#grid").html(gridView.el);

<script id="grid-template" type="text/template">
    <thead>        
        <tr>
            <th>Username</th>
            <th>Full Name</th>
        </tr>
    </thead>
    <tbody></tbody>
</script>

<script id="row-template" type="text/template">
        <td>
            <%= username %>
        </td>
        <td>
            <%= fullname %>
        </td>
</script>
        
<div id="grid">
</div>

table, tr, td, th, thead {
    padding: 5px;
    margin: 5px;
    border: 2px solid #ccc;
}

thead {
    background-color: #555;
    color: #fff;
}