diff --git a/index.html b/index.html
index 436ae14..062f7c0 100644
--- a/index.html
+++ b/index.html
@@ -1,262 +1,330 @@
 <!DOCTYPE html>
 <html>
 <head>
-<style>
-    table tr:first-child {
-    color: #FFFFFF;
-    background-color: #639187;
-    }
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 
-    table tr td:first-child {
-    color: #FFFFFF;
-    background-color: #639187;
-    
-    }
-    td{
-        width: 25px;
-    }
-</style>
+    <style>
+        table {
+            cursor: pointer;
+            border-collapse: collapse;
+            font-size: 12px;
+        }
+
+        table:hover {
+            opacity: 0.8;
+        }
+
+        table tr:first-child {
+            color: #ffffff;
+            background-color: #639187;
+        }
+
+        table tr td:first-child {
+            color: #ffffff;
+            background-color: #639187;
+        }
+
+        td {
+            width: 25px;
+            border: 1px solid black;
+        }
+
+        tfoot td {
+            background-color: black;
+        }
+
+    </style>
 
 </head>
 <body>
-   
-      <table cellspacing="0" border="1" id="transposed">
-        <tbody>
-          <tr>
-            <td></td>
-            <td colspan="1">9:00</td>
-            <td colspan="1">9:15</td>
-            <td colspan="1">9:30</td>
-            <td colspan="1">9:45</td>
-            <td colspan="1">10:00</td>
-            <td colspan="1">10:15</td>
-            <td colspan="1">10:30</td>
-            <td colspan="1">10:45</td>
-            <td colspan="1">11:00</td>
-            <td colspan="1">11:15</td>
-            <td colspan="1">11:30</td>
-            <td colspan="1">11:45</td>
-            <td colspan="1">12:00</td>
-            <td colspan="1">12:15</td>
-            <td colspan="1">12:30</td>
-            <td colspan="1">12:45</td>
-            <td colspan="1">13:00</td>
-            <td colspan="1">13:15</td>
-            <td colspan="1">13:30</td>
-            <td colspan="1">13:45</td>
-            <td colspan="1">14:00</td>
-            <td colspan="1">14:15</td>
-            <td colspan="1">14:30</td>
-            <td colspan="1">14:45</td>
-            <td colspan="1">15:00</td>
-            <td colspan="1">15:15</td>
-            <td colspan="1">15:30</td>
-            <td colspan="1">15:45</td>
-            <td colspan="1">16:00</td>
-            <td colspan="1">16:15</td>
-            <td colspan="1">16:30</td>
-            <td colspan="1">16:45</td>
-            <td colspan="1">17:00</td>
-            <td colspan="1">17:15</td>
-            <td colspan="1">17:30</td>
-            <td colspan="1">17:45</td>
-            <td colspan="1">18:00</td>
-          </tr>
-      
-          <tr>
-            <td rowspan="1">Madrid</td>
-            <td style="background-color: rgb(204, 204, 204);" colspan="4" rowspan="1"></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td style="background-color: rgb(204, 204, 204);" colspan="4" rowspan="1"></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td></td>
-          </tr>
-          <tr>
-            <td rowspan="1">London</td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td style="background-color: rgb(204, 204, 204);" colspan="4" rowspan="1"></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td style="background-color: rgb(204, 204, 204);" colspan="4" rowspan="1"></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td style="background-color: rgb(204, 204, 204);" colspan="4" rowspan="1"></td>
-            <td></td>
-          </tr>
-          <tr>
-            <td rowspan="1">Paris</td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td colspan="12" rowspan="1" style="background-color: rgb(204, 204, 204);"></td>
-            <td colspan="4" rowspan="1" style="background-color: rgb(204, 204, 204);"></td>
-            <td></td>
-          </tr>
-        </tbody>
-      </table>
-      <p><a href="#" id="transposButton">Do it.</a></p>
-    </table>
+<table class="xpure-table" id="table_a">
+    <thead>
+    <tr>
+        <td></td>
+        <td colspan="1">9:00</td>
+        <td colspan="1">9:15</td>
+        <td colspan="1">9:30</td>
+        <td colspan="1">9:45</td>
+        <td colspan="1">10:00</td>
+        <td colspan="1">10:15</td>
+        <td colspan="1">10:30</td>
+        <td colspan="1">10:45</td>
+        <td colspan="1">11:00</td>
+        <td colspan="1">11:15</td>
+        <td colspan="1">11:30</td>
+        <td colspan="1">11:45</td>
+        <td colspan="1">12:00</td>
+        <td colspan="1">12:15</td>
+        <td colspan="1">12:30</td>
+        <td colspan="1">12:45</td>
+        <td colspan="1">13:00</td>
+        <td colspan="1">13:15</td>
+        <td colspan="1">13:30</td>
+        <td colspan="1">13:45</td>
+        <td colspan="1">14:00</td>
+        <td colspan="1">14:15</td>
+        <td colspan="1">14:30</td>
+        <td colspan="1">14:45</td>
+        <td colspan="1">15:00</td>
+        <td colspan="1">15:15</td>
+        <td colspan="1">15:30</td>
+        <td colspan="1">15:45</td>
+        <td colspan="1">16:00</td>
+        <td colspan="1">16:15</td>
+        <td colspan="1">16:30</td>
+        <td colspan="1">16:45</td>
+        <td colspan="1">17:00</td>
+        <td colspan="1">17:15</td>
+        <td colspan="1">17:30</td>
+        <td colspan="1">17:45</td>
+        <td colspan="1">18:00</td>
+        <td>Status</td>
+    </tr>
+    </thead>
+    <tbody>
+    <tr>
+        <td rowspan="1">Madrid</td>
+        <td style="background-color: rgb(204, 204, 204);" colspan="4" rowspan="1"></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td style="background-color: rgb(204, 204, 204);" colspan="4" rowspan="1"></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td rowspan=3></td>
+    </tr>
+    <tr>
+        <td rowspan="1">London</td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td style="background-color: rgb(204, 204, 204);" colspan="4" rowspan="1"></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td style="background-color: rgb(204, 204, 204);" colspan="4" rowspan="1"></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td style="background-color: rgb(204, 204, 204);" colspan="4" rowspan="1"></td>
+        <td></td>
+
+    </tr>
+    <tr>
+        <td rowspan="1">Paris</td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td colspan="12" rowspan="1" style="background-color: rgb(204, 204, 204);"></td>
+        <td colspan="4" rowspan="1" style="background-color: rgb(204, 204, 204);"></td>
+        <td></td>
+
+    </tr>
+    </tbody>
+    <tfoot>
+    <tr>
+        <td rowspan="1">Status</td>
+        <td style="background-color: rgb(204, 204, 204);" colspan="4" rowspan="1"></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td style="background-color: rgb(204, 204, 204);" colspan="4" rowspan="1"></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td></td>
+    </tr>
+    </tfoot>
+</table>
 
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 
-    <script>
-        let inDynamicEditMode   = true;  
-        $("a#transposButton").click(function(){
-          inDynamicEditMode ^= true;            
-          if(inDynamicEditMode == 0){
-            swap();
-          }else{
-            location.reload();
-          }
-        });
-        
-          function swap(){
-          console.time();
-          const transpose = m => m[0].map((x, i) => m.map(x => x[i]));
-          const table = document.getElementById("transposed");
-          const rows = Array.from(table.querySelectorAll("tr"));
-          const totalRowCount = rows.length;
+<script>
+    $("table").click(function () {
+        swap($(this), 1, 1);
+    })
 
-          const m = new Array(totalRowCount); 
-          for (let r = 0; r < totalRowCount; r++) {
+    // i accidentally deleted this and am now trying to recreate it...
+
+    /**
+     * @param table   DOM element, jQuery object, jQuery selector, or integer
+     */
+    function swap(table, numHeadRows, numFootRows) {
+        if (typeof table == 'string') table = $(table)
+        else if (table instanceof jQuery) table = table[0]
+        else if (table && typeof table == 'object' && table.id) table = table
+        else table = $(this)[0]   //
+
+        const transpose = (m) => m[0].map((x, i) => m.map((x) => x[i]));
+        const rows = Array.from(table.querySelectorAll("tr"));
+        const totalRowCount = rows.length;
+
+        const m = new Array(totalRowCount);
+        for (let r = 0; r < totalRowCount; r++) {
             const row = rows[r];
             const cells = Array.from(row.querySelectorAll("td"));
             m[r] = [];
             for (let c = 0; c < cells.length; c++) {
-              const cell = cells[c];
-              let rowspan = cell.getAttribute("rowspan");
-              let colspan = cell.getAttribute("colspan");
-              rowspan = parseInt(rowspan, 10);
-              colspan = parseInt(colspan, 10);   
-              
-              cell.setAttribute("colspan", rowspan);
-              cell.setAttribute("rowspan", colspan);              
+                const cell = cells[c];
+                let rowspan = cell.getAttribute("rowspan");
+                let colspan = cell.getAttribute("colspan");
+                rowspan = parseInt(rowspan, 10);
+                colspan = parseInt(colspan, 10);
 
-              m[r].push({
-              element: cell,
-              index: c,
-              rowspan: rowspan,
-              colspan: colspan
-              });             
-            }           
-          }
+                if (rowspan) cell.setAttribute("colspan", rowspan);
+                if (colspan) cell.setAttribute("rowspan", colspan);
+
+                m[r].push({
+                    element: cell,
+                    index: c,
+                    rowspan: rowspan || undefined,
+                    colspan: colspan || undefined
+                });
+            }
+        }
 
-          let rowsToSpan = 0;
-          let colsToSpan = 0;
-          let cellsToInject = new Array(m.length);
-          for (let r = 0; r < m.length; r++) {
-            let colSpannedCells = m[r].filter(c => c.colspan && c.colspan > 1);
+        let rowsToSpan = 0;
+        let colsToSpan = 0;
+        let cellsToInject = new Array(m.length);
+        for (let r = 0; r < m.length; r++) {
+            let colSpannedCells = m[r].filter((c) => c.colspan && c.colspan > 1);
             cellsToInject[r] = new Array(colSpannedCells.length);
             for (let c = 0; c < colSpannedCells.length; c++) {
                 let cell = colSpannedCells[c];
                 cellsToInject[r].push({
-                index: cell.index,
-                cells: new Array(cell.colspan - 1)
+                    index: cell.index,
+                    cells: new Array(cell.colspan - 1)
                 });
             }
-          }
-          var r = 0;
-          for (let row of cellsToInject) {
+        }
+        var r = 0;
+        for (let row of cellsToInject) {
             if (row && row.length) {
-              var injectIndex = 0;
-              var injectCount = 0;
-              for (let col of row) {
-                if (col && col.cells.length) {
-                  col.cells.fill({
-                  element: null,
-                  rowspan: null,
-                  colspan: null
-                  });
-                    
-                  injectIndex = col.index + injectCount + 1;
-                  Array.prototype.splice.apply(m[r], [injectIndex, 0, ...col.cells]);  
-                  injectCount += col.cells.length;
+                var injectIndex = 0;
+                var injectCount = 0;
+                for (let col of row) {
+                    if (col && col.cells.length) {
+                        col.cells.fill({
+                            element: null,
+                            rowspan: null,
+                            colspan: null
+                        });
+
+                        injectIndex = col.index + injectCount + 1;
+                        Array.prototype.splice.apply(m[r], [injectIndex, 0, ...col.cells]);
+                        injectCount += col.cells.length;
+                    }
                 }
-              }
             }
             r++;
-          }
+        }
+
+        const transposed = transpose(m);
 
-          const transposed = transpose(m);
+        table.removeChild(table.querySelector("thead"));
+        table.removeChild(table.querySelector("tbody"));
+        table.removeChild(table.querySelector("tfoot"));
 
-          table.removeChild(table.querySelector("tbody"));
-          let tbody = document.createElement("tbody");
+        let thead = document.createElement("thead");
+        let tbody = document.createElement("tbody");
+        let tfoot = document.createElement("tfoot")
 
-          for (let rw of transposed) {
+        for (let i = 0; i < transposed.length; i++) {
+            let rw = transposed[i]
             const row = document.createElement("tr");
             for (let ce of rw) {
-              if (ce && ce.element) {
-              row.appendChild(ce.element);
-              }
+                if (ce && ce.element) {
+                    row.appendChild(ce.element);
+                }
             }
-            tbody.appendChild(row);
-          }
-          table.appendChild(tbody);
-          console.timeEnd();
-        };
-    </script>
-    
+            if (numHeadRows > 0 && i < numHeadRows) thead.appendChild(row)
+            else if (numFootRows > 0 && i > (transposed.length - numFootRows - 1)) tfoot.appendChild(row)
+            else tbody.appendChild(row);
+        }
+        if (numHeadRows > 0) table.appendChild(thead)
+        table.appendChild(tbody);
+        if (numFootRows > 0) table.appendChild(tfoot)
+    }
+
+</script>
+
 </body>
 </html>
\ No newline at end of file

	9:00	9:15	9:30	9:45	10:00	10:15	10:30	10:45	11:00	11:15	11:30	11:45	12:00	12:15	12:30	12:45	13:00	13:15	13:30	13:45	14:00	14:15	14:30	14:45	15:00	15:15	15:30	15:45	16:00	16:15	16:30	16:45	17:00	17:15	17:30	17:45	18:00	Status
Madrid
London
Paris
Status