diff --git a/docs/awesome_table_in_html.Rmd b/docs/awesome_table_in_html.Rmd
index 4355e0e..1122b8f 100644
--- a/docs/awesome_table_in_html.Rmd
+++ b/docs/awesome_table_in_html.Rmd
@@ -58,7 +58,7 @@
 ```
 
 # Table Styles
-`kable_styling` offers server other ways to customize the look of a HTML table. 
+`kable_styling` offers a few other ways to customize the look of a HTML table. 
 
 ## Bootstrap table classes
 If you are familiar with twitter bootstrap, you probably have already known its predefined classes, including `striped`, `bordered`, `hover`, `condensed` and `responsive`. If you are not familiar, no worries, you can take a look at their [documentation site](http://getbootstrap.com/css/#tables) to get a sense of how they look like. All of these options are available here. 
diff --git a/docs/awesome_table_in_html.html b/docs/awesome_table_in_html.html
index 55c0151..9fb6298 100644
--- a/docs/awesome_table_in_html.html
+++ b/docs/awesome_table_in_html.html
@@ -11,7 +11,7 @@
 
 <meta name="author" content="Hao Zhu" />
 
-<meta name="date" content="2017-08-01" />
+<meta name="date" content="2017-08-03" />
 
 <title>Create Awesome HTML Table with knitr::kable and kableExtra</title>
 
@@ -217,7 +217,7 @@
 
 <h1 class="title toc-ignore">Create Awesome HTML Table with knitr::kable and kableExtra</h1>
 <h4 class="author"><em>Hao Zhu</em></h4>
-<h4 class="date"><em>2017-08-01</em></h4>
+<h4 class="date"><em>2017-08-03</em></h4>
 
 </div>
 
@@ -547,7 +547,7 @@
 </div>
 <div id="table-styles" class="section level1">
 <h1>Table Styles</h1>
-<p><code>kable_styling</code> offers server other ways to customize the look of a HTML table.</p>
+<p><code>kable_styling</code> offers a few other ways to customize the look of a HTML table.</p>
 <div id="bootstrap-table-classes" class="section level2">
 <h2>Bootstrap table classes</h2>
 <p>If you are familiar with twitter bootstrap, you probably have already known its predefined classes, including <code>striped</code>, <code>bordered</code>, <code>hover</code>, <code>condensed</code> and <code>responsive</code>. If you are not familiar, no worries, you can take a look at their <a href="http://getbootstrap.com/css/#tables">documentation site</a> to get a sense of how they look like. All of these options are available here.</p>
@@ -2778,7 +2778,7 @@
 1
 </td>
 <td style="text-align:center;">
-0
+1
 </td>
 </tr>
 <tr>
@@ -2786,7 +2786,7 @@
 2
 </td>
 <td style="text-align:center;">
-1
+0
 </td>
 </tr>
 <tr>
@@ -2818,7 +2818,7 @@
 6
 </td>
 <td style="text-align:center;">
-1
+0
 </td>
 </tr>
 <tr>
@@ -2826,7 +2826,7 @@
 7
 </td>
 <td style="text-align:center;">
-1
+0
 </td>
 </tr>
 <tr>
@@ -2837,7 +2837,7 @@
 8
 </td>
 <td style="text-align:center;">
-0
+1
 </td>
 </tr>
 <tr>
@@ -2845,7 +2845,7 @@
 9
 </td>
 <td style="text-align:center;">
-1
+0
 </td>
 </tr>
 <tr>
@@ -2853,7 +2853,7 @@
 10
 </td>
 <td style="text-align:center;">
-0
+1
 </td>
 </tr>
 <tr>
@@ -2867,7 +2867,7 @@
 11
 </td>
 <td style="text-align:center;">
-0
+1
 </td>
 </tr>
 <tr>
@@ -3061,6 +3061,18 @@
 </td>
 </tr>
 </tbody>
+<tfoot>
+<tr>
+<td style="padding: 0; border:0;" colspan="100%">
+<sup>a</sup> Footnote 1
+</td>
+</tr>
+<tr>
+<td style="padding: 0; border:0;" colspan="100%">
+<sup>b</sup> Have a good day.
+</td>
+</tr>
+</tfoot>
 </table>
 </div>
 <div id="number" class="section level3">
@@ -3210,6 +3222,18 @@
 </td>
 </tr>
 </tbody>
+<tfoot>
+<tr>
+<td style="padding: 0; border:0;" colspan="100%">
+<sup>1</sup> Footnote 1
+</td>
+</tr>
+<tr>
+<td style="padding: 0; border:0;" colspan="100%">
+<sup>2</sup> Have a good day.
+</td>
+</tr>
+</tfoot>
 </table>
 </div>
 <div id="symbol" class="section level3">
@@ -3359,6 +3383,23 @@
 </td>
 </tr>
 </tbody>
+<tfoot>
+<tr>
+<td style="padding: 0; border:0;" colspan="100%">
+<sup>*</sup> Footnote 1
+</td>
+</tr>
+<tr>
+<td style="padding: 0; border:0;" colspan="100%">
+<sup>†</sup> Footnote 2
+</td>
+</tr>
+<tr>
+<td style="padding: 0; border:0;" colspan="100%">
+<sup>‡</sup> Footnote 3
+</td>
+</tr>
+</tfoot>
 </table>
 </div>
 </div>
@@ -3531,6 +3572,23 @@
 </td>
 </tr>
 </tbody>
+<tfoot>
+<tr>
+<td style="padding: 0; border:0;" colspan="100%">
+<sup>*</sup> This table is from mtcars
+</td>
+</tr>
+<tr>
+<td style="padding: 0; border:0;" colspan="100%">
+<sup>†</sup> Group 1 contains mpg, cyl and disp
+</td>
+</tr>
+<tr>
+<td style="padding: 0; border:0;" colspan="100%">
+<sup>‡</sup> Group 2 contains hp, drat and wt
+</td>
+</tr>
+</tfoot>
 </table>
 </div>
 </div>