HTML and CSS Reference
In-Depth Information
<!-- WinJS references -->
<link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet">
<script src="//Microsoft.WinJS.0.6/js/base.js"></script>
<script src="//Microsoft.WinJS.0.6/js/ui.js"></script>
<!-- MetroGrocer references -->
<link href="/css/default.css" rel="stylesheet">
<script src="/js/viewmodel.js"></script>
<script src="/js/default.js"></script>
<div id="contentGrid">
<div id="leftContainer" class="gridLeft">
<h1 class="win-type-xx-large">Grocery List</h1>
<table id="listTable" class="type-table-header">
<th class="itemName">Item</th>
<tbody id="itemBody"></tbody>
<div id="topRightContainer" class="gridRight">
<h1 class="win-type-xx-large">Top Right Container</h1>
<div id="bottomRightContainer" class="gridRight">
<h1 class="win-type-xx-large">Bottom Right Container</h1>
<!-- template for grocery list items -->
<tbody id="itemTemplate" data-win-control="WinJS.Binding.Template">
<tr class="groceryItem">
<td data-win-bind="innerText: quantity"></td>
<td data-win-bind="innerText: item"></td>
<td data-win-bind="innerText: store"></td>
<!-- end of template for grocery list items -->
here are two new table elements in this document. The first one, with the id attribute of
listTable , is what the user will see. This table has a header with column titles, but the tbody ele-
ment is empty. This is where I will use a template to insert a row for each item in the grocery list.
Search WWH ::

Custom Search