diff --git a/web/gui/src/main/webapp/_bripc/practice-table.html b/web/gui/src/main/webapp/_bripc/practice-table.html
new file mode 100644
index 0000000..943c221
--- /dev/null
+++ b/web/gui/src/main/webapp/_bripc/practice-table.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<!--
+  ~ Copyright 2015 Open Networking Laboratory
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~     http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  -->
+
+<!--
+  ONOS -- Displaying icons with Angular test page
+  -->
+
+<html>
+<head lang="en">
+    <meta charset="UTF-8">
+    <title>Practice Table Formatting</title>
+
+    <script type="text/javascript" src="../tp/angular.js"></script>
+    <script type="text/javascript" src="../tp/angular-route.js"></script>
+
+    <script type="text/javascript" src="../tp/d3.js"></script>
+    <script type="text/javascript" src="../tp/jquery-2.1.1.min.js"></script>
+
+    <script type="text/javascript" src="practice-table.js"></script>
+
+    <style>
+        html,
+        body {
+            background-color: #ddf;
+            font-family: Arial, Helvetica, sans-serif;
+            font-size: 9pt;
+        }
+
+        h2 {
+            color: darkred;
+        }
+
+    </style>
+
+</head>
+<!-- outline for using a controller in Angular -->
+<body ng-app="practiceTable">
+    <h2>Scrolling Table Practice</h2>
+    <div>
+    <table fixed-header>
+           <thead>
+               <tr>
+                   <th>URI</th>
+                   <th>Vendor</th>
+                   <th>Hardware Version</th>
+                   <th>Software Version</th>
+                   <th>Serial Number</th>
+                   <th>Protocol</th>
+               </tr>
+           </thead>
+           <tbody>
+               <tr>
+                   <td>id</td>
+                   <td>mfr</td>
+                   <td>hw</td>
+                   <td>sw</td>
+                   <td>serial</td>
+                   <td>protocol</td>
+               </tr>
+               <tr>
+                   <td>id</td>
+                   <td>mfr</td>
+                   <td>hw</td>
+                   <td>sw</td>
+                   <td>serial</td>
+                   <td>protocol</td>
+               </tr>
+               <tr>
+                   <td>id</td>
+                   <td>mfr</td>
+                   <td>hw</td>
+                   <td>sw</td>
+                   <td>serial</td>
+                   <td>protocol</td>
+               </tr>
+               <tr>
+                   <td>id</td>
+                   <td>mfr</td>
+                   <td>hw</td>
+                   <td>sw</td>
+                   <td>serial</td>
+                   <td>protocol</td>
+               </tr>
+           </tbody>
+       </table>
+    </div>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/web/gui/src/main/webapp/_bripc/practice-table.js b/web/gui/src/main/webapp/_bripc/practice-table.js
new file mode 100644
index 0000000..c025671
--- /dev/null
+++ b/web/gui/src/main/webapp/_bripc/practice-table.js
@@ -0,0 +1,129 @@
+/*
+ * Copyright 2015 Open Networking Laboratory
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ ONOS GUI -- Showing Icons Test Module
+ */
+
+(function () {
+    'use strict';
+
+    function setColWidth($log, t) {
+        var tHeaders, tdElement;
+
+        // for each th, set its width to td's width
+        // do this by looping through each td in the first row
+        // and finding its column width
+        tHeaders = t.selectAll('th');
+        //loop through selectAll array
+        tHeaders.forEach(function(thElement){
+            tdElement = t.filter('nth-child()');
+            $log.log(thElement);
+        });
+    }
+
+    function setCSS(thead, tbody) {
+
+    }
+
+    function trimTable(tbody) {
+
+    }
+
+    function fixTable($log, t, th, tb) {
+        setColWidth($log, t);
+        setCSS(th, tb);
+        trimTable(tb);
+    }
+
+    angular.module('practiceTable', [])
+
+        .directive('fixedHeader', ['$log', '$timeout', function ($log, $timeout) {
+            return {
+                restrict: 'A',
+
+                link: function (scope, element, attrs) {
+                    var table = d3.select(element[0]),
+                        thead = table.select('thead'),
+                        tbody = table.select('tbody');
+
+                    // wait until the table is visible
+                    scope.$watch(
+                        function () { return (!(table.offsetParent === null)); },
+                        function (newValue, oldValue) {
+                            if (newValue === true) {
+                                $log.log('table is visible');
+
+                                // ensure thead and tbody have no display
+                                thead.style('display', null);
+                                tbody.style('display', null);
+
+                                $timeout(function() {
+                                    $log.log('timeout is over');
+                                    fixTable($log, table, thead, tbody);
+                                }, 200);
+                            }
+                        });
+                    $log.log('fixedHeader directive has been created');
+                }
+            };
+        }]);
+}());
+
+$scope.$watch(function () { return $elem.find("tbody").is(':visible') },
+    function (newValue, oldValue) {
+        if (newValue === true) {
+            // reset display styles so column widths are correct when measured below
+            $elem.find('thead, tbody, tfoot').css('display', '');
+
+            // wrap in $timeout to give table a chance to finish rendering
+            $timeout(function () {
+                // set widths of columns
+                $elem.find('th').each(function (i, thElem) {
+                    thElem = $(thElem);
+                    var tdElems = $elem.find('tbody tr:first td:nth-child(' + (i + 1) + ')');
+                    var tfElems = $elem.find('tfoot tr:first td:nth-child(' + (i + 1) + ')');
+
+                    var columnWidth = tdElems.width();
+                    thElem.width(columnWidth);
+                    tdElems.width(columnWidth);
+                    tfElems.width(columnWidth);
+                });
+
+                // set css styles on thead and tbody
+                $elem.find('thead, tfoot').css({
+                    'display': 'block',
+                });
+
+                $elem.find('tbody').css({
+                    'display': 'block',
+                    'height': $scope.tableHeight || '400px',
+                    'overflow': 'auto'
+                });
+
+                // reduce width of last column by width of scrollbar
+                var scrollBarWidth = $elem.find('thead').width() - $elem.find('tbody')[0].clientWidth;
+                if (scrollBarWidth > 0) {
+                    // for some reason trimming the width by 2px lines everything up better
+                    scrollBarWidth -= 2;
+                    $elem.find('tbody tr:first td:last-child').each(function (i, elem) {
+                        $(elem).width($(elem).width() - scrollBarWidth);
+                    });
+                }
+            });
+        }
+    });
+}
\ No newline at end of file
diff --git a/web/gui/src/main/webapp/app/common.css b/web/gui/src/main/webapp/app/common.css
index dc6c96e..1ca7257 100644
--- a/web/gui/src/main/webapp/app/common.css
+++ b/web/gui/src/main/webapp/app/common.css
@@ -25,11 +25,11 @@
 
 /* TODO: uncomment following lines for scrollable table */
 /* Possible CSS style for creating a scrollable table */
-/*table.summary-list tbody {*/
-    /*height: 100px;*/
-    /*overflow: auto;*/
-    /*display: block;*/
-/*}*/
+table.summary-list tbody {
+    height: 500px;
+    overflow: auto;
+    display: block;
+}
 
 table.summary-list th {
     padding: 5px;
diff --git a/web/gui/src/main/webapp/app/view/device/device.html b/web/gui/src/main/webapp/app/view/device/device.html
index 714d44a..a83f5e7 100644
--- a/web/gui/src/main/webapp/app/view/device/device.html
+++ b/web/gui/src/main/webapp/app/view/device/device.html
@@ -3,26 +3,27 @@
     <h2>Device View</h2>
 <!-- TODO: uncomment and test the thead and tbody tags for CSS styling -->
     <table class="summary-list">
-        <!-- <thead> -->
-        <tr>
-            <th></th>
-            <th>ID</th>
-            <th>Manufacturer</th>
-            <th>Hardware Version</th>
-            <th>Software Version</th>
-        </tr>
-        <!-- </thead> -->
+        <tbody>
+            <tr>
+                <th></th>
+                <th>URI</th>
+                <th>Vendor</th>
+                <th>Hardware Version</th>
+                <th>Software Version</th>
+                <th>Serial Number</th>
+                <th>Protocol</th>
+            </tr>
 
-        <!-- <tbody> -->
-        <tr ng-repeat="dev in ctrl.deviceData">
-            <td><div icon icon-id="{{dev._iconid_available}}"></div></td>
-            <td>{{dev.id}}</td>
-            <td>{{dev.mfr}}</td>
-            <td>{{dev.hw}}</td>
-            <td>{{dev.sw}}</td>
-            <!-- add more property fields for table from device data -->
-        </tr>
-        <!-- </tbody> -->
+            <tr ng-repeat="dev in ctrl.deviceData">
+                <td><div icon icon-id="{{dev._iconid_available}}"></div></td>
+                <td>{{dev.id}}</td>
+                <td>{{dev.mfr}}</td>
+                <td>{{dev.hw}}</td>
+                <td>{{dev.sw}}</td>
+                <td>{{dev.serial}}</td>
+                <td>{{dev.annotations.protocol}}</td>
+            </tr>
+        </tbody>
     </table>
 
 </div>