Use JQuery to add .table to every table element in order to use Bootstrap table style. Add doccumentation about this change

Vimwiki.wiki

@@ -1,10 +1,29 @@
 = Vimwiki =
 
 == TODO ==
-* [ ] Commit to a repository
+* [X] Commit to a repository
 * [ ] Setup remote to host
 * [ ] Setup remote to automatically `:VimwikiAll2HTML` after it's been pushed to
 
+== Table tweaks ==
+
+Tables without any styles are gross, so let's use the styles from Bootstrap. Problem is that Vimwiki doesn't provide a way to add a class to a table element, so we'll do it with JQuery:
+
+{{{class="prettyprint"
+<script>
+$(document).ready(function(){
+	$("table").addClass("table table-condensed table-hover");
+});
+</script>
+}}}
+
+This adds `.table`, `.table-condensed`, and `.table-hover` classes to every table element in the whole document. Don't see why it should be any other way for the moment.
+
+=== References ===
+
+http://stackoverflow.com/a/39897883
+http://www.w3schools.com/jquery/jquery_syntax.asp
+
 == HTML Checkboxes ==
 
 By default, there is no difference between how a non-checkbox list item, unchecked list item, and a checked list item are displayed when exported to HTML. 
@@ -13,13 +32,13 @@ There are 5 states of a checkbox, 0-4, and they each represent a different level
 
 Checkbox states:
 
-| # | % Complete | li class | Unicode character | Escape sequence | HTML code  |
+| State # | % Complete | li class | Unicode character | Escape sequence | HTML code  |
-|---|------------|----------|-------------------|-----------------|------------|
+|---------|------------|----------|-------------------|-----------------|------------|
-| 0 | 0%         | `done0`  | ◯                 | `\u25EF`        | `&#9711;`  |
+| 0       | 0%         | `done0`  | ◯                 | `\u25EF`        | `&#9711;`  |
-| 1 | 1-33%      | `done1`  | ◔                 | `\u25D4`        | `&#9684;`  |
+| 1       | 1-33%      | `done1`  | ◔                 | `\u25D4`        | `&#9684;`  |
-| 2 | 34-66%     | `done2`  | ◑                 | `\u25D1`        | `&#9681;`  |
+| 2       | 34-66%     | `done2`  | ◑                 | `\u25D1`        | `&#9681;`  |
-| 3 | 67-99%     | `done3`  | ◕                 | `\u25D5`        | `&#9685;`  |
+| 3       | 67-99%     | `done3`  | ◕                 | `\u25D5`        | `&#9685;`  |
-| 4 | 100%       | `done4`  | ✔                 | `\u2714`        | `&#10004;` |
+| 4       | 100%       | `done4`  | ✔                 | `\u2714`        | `&#10004;` |
 
 Now, in order to use these in our HTML, we just have to write a style for `ul li.doneX:before` in our header like so:
 

html-template/index.html

@@ -11,6 +11,8 @@
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
 
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
+
     <!--bootstrap stuff start-->
     <!-- Latest compiled and minified CSS -->
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
@@ -25,6 +27,13 @@
 
     <!--Google Syntax Highlighting-->
     <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sons-of-obsidian"></script>
+
+    
+    <script>
+$(document).ready(function(){
+$("table").addClass("table table-condensed table-hover");
+});
+    </script>
     
     <!--Checkbox list tweaks-->
     <style>
@@ -35,6 +44,8 @@
     ul li.done4:before {content: '\2714';}
     </style>
 
+
+
     
 </head>