Fix a typo in Doc
diff --git a/docs/awesome_table_in_html.html b/docs/awesome_table_in_html.html
index 1fc1d9b..488610d 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="2018-01-11" />
+<meta name="date" content="2018-01-16" />
<title>Create Awesome HTML Table with knitr::kable and kableExtra</title>
@@ -219,7 +219,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>2018-01-11</em></h4>
+<h4 class="date"><em>2018-01-16</em></h4>
</div>
@@ -1989,10 +1989,10 @@
Mazda RX4
</td>
<td style="text-align:left;">
-<span style=" color: red;">21</span>
+<span style=" color: red;">21</span>
</td>
<td style="text-align:left;">
-<span style="-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); display: inline-block; "><span style=" color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: #999999;text-align: c;">6</span></span>
+<span style="-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); display: inline-block; "><span style=" color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: #999999;text-align: c;">6</span></span>
</td>
</tr>
<tr>
@@ -2000,10 +2000,10 @@
Mazda RX4 Wag
</td>
<td style="text-align:left;">
-<span style=" color: red;">21</span>
+<span style=" color: red;">21</span>
</td>
<td style="text-align:left;">
-<span style="-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); display: inline-block; "><span style=" color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: #999999;text-align: c;">6</span></span>
+<span style="-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); display: inline-block; "><span style=" color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: #999999;text-align: c;">6</span></span>
</td>
</tr>
<tr>
@@ -2011,10 +2011,10 @@
Datsun 710
</td>
<td style="text-align:left;">
-<span style=" color: red;">22.8</span>
+<span style=" color: red;">22.8</span>
</td>
<td style="text-align:left;">
-<span style="-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); display: inline-block; "><span style=" color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: #666666;text-align: c;">4</span></span>
+<span style="-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); display: inline-block; "><span style=" color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: #666666;text-align: c;">4</span></span>
</td>
</tr>
<tr>
@@ -2022,10 +2022,10 @@
Hornet 4 Drive
</td>
<td style="text-align:left;">
-<span style=" color: red;">21.4</span>
+<span style=" color: red;">21.4</span>
</td>
<td style="text-align:left;">
-<span style="-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); display: inline-block; "><span style=" color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: #999999;text-align: c;">6</span></span>
+<span style="-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); display: inline-block; "><span style=" color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: #999999;text-align: c;">6</span></span>
</td>
</tr>
<tr>
@@ -2033,10 +2033,10 @@
Hornet Sportabout
</td>
<td style="text-align:left;">
-<span style=" color: blue;">18.7</span>
+<span style=" color: blue;">18.7</span>
</td>
<td style="text-align:left;">
-<span style="-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); display: inline-block; "><span style=" color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: #BBBBBB;text-align: c;">8</span></span>
+<span style="-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); display: inline-block; "><span style=" color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: #BBBBBB;text-align: c;">8</span></span>
</td>
</tr>
<tr>
@@ -2044,10 +2044,10 @@
Valiant
</td>
<td style="text-align:left;">
-<span style=" color: blue;">18.1</span>
+<span style=" color: blue;">18.1</span>
</td>
<td style="text-align:left;">
-<span style="-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); display: inline-block; "><span style=" color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: #999999;text-align: c;">6</span></span>
+<span style="-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); display: inline-block; "><span style=" color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: #999999;text-align: c;">6</span></span>
</td>
</tr>
<tr>
@@ -2055,10 +2055,10 @@
Duster 360
</td>
<td style="text-align:left;">
-<span style=" color: blue;">14.3</span>
+<span style=" color: blue;">14.3</span>
</td>
<td style="text-align:left;">
-<span style="-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); display: inline-block; "><span style=" color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: #BBBBBB;text-align: c;">8</span></span>
+<span style="-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); display: inline-block; "><span style=" color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: #BBBBBB;text-align: c;">8</span></span>
</td>
</tr>
<tr>
@@ -2066,10 +2066,10 @@
Merc 240D
</td>
<td style="text-align:left;">
-<span style=" color: red;">24.4</span>
+<span style=" color: red;">24.4</span>
</td>
<td style="text-align:left;">
-<span style="-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); display: inline-block; "><span style=" color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: #666666;text-align: c;">4</span></span>
+<span style="-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); display: inline-block; "><span style=" color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: #666666;text-align: c;">4</span></span>
</td>
</tr>
<tr>
@@ -2077,10 +2077,10 @@
Merc 230
</td>
<td style="text-align:left;">
-<span style=" color: red;">22.8</span>
+<span style=" color: red;">22.8</span>
</td>
<td style="text-align:left;">
-<span style="-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); display: inline-block; "><span style=" color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: #666666;text-align: c;">4</span></span>
+<span style="-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); display: inline-block; "><span style=" color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: #666666;text-align: c;">4</span></span>
</td>
</tr>
<tr>
@@ -2088,10 +2088,10 @@
Merc 280
</td>
<td style="text-align:left;">
-<span style=" color: blue;">19.2</span>
+<span style=" color: blue;">19.2</span>
</td>
<td style="text-align:left;">
-<span style="-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); display: inline-block; "><span style=" color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: #999999;text-align: c;">6</span></span>
+<span style="-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); display: inline-block; "><span style=" color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: #999999;text-align: c;">6</span></span>
</td>
</tr>
</tbody>
@@ -2134,172 +2134,172 @@
<tbody>
<tr>
<td style="text-align:center;">
-<span style=" font-weight: bold; color: rgba(40, 174, 128, 1);font-size: 14px;">5.1</span>
+<span style=" font-weight: bold; color: rgba(40, 174, 128, 1);font-size: 14px;">5.1</span>
</td>
<td style="text-align:center;">
-<span style=" font-weight: bold; color: rgba(31, 154, 138, 1);font-size: 13px;">3.5</span>
+<span style=" font-weight: bold; color: rgba(31, 154, 138, 1);font-size: 13px;">3.5</span>
</td>
<td style="text-align:center;">
-<span style=" font-weight: bold; color: rgba(62, 75, 138, 1);font-size: 10px;">1.4</span>
+<span style=" font-weight: bold; color: rgba(62, 75, 138, 1);font-size: 10px;">1.4</span>
</td>
<td style="text-align:center;">
-<span style=" font-weight: bold; color: rgba(53, 96, 141, 1);font-size: 11px;">0.2</span>
+<span style=" font-weight: bold; color: rgba(53, 96, 141, 1);font-size: 11px;">0.2</span>
</td>
<td style="text-align:center;">
-<span style=" font-weight: bold; color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: rgba(254, 206, 145, 1);">setosa</span>
+<span style=" font-weight: bold; color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: rgba(254, 206, 145, 1);">setosa</span>
</td>
</tr>
<tr>
<td style="text-align:center;">
-<span style=" font-weight: bold; color: rgba(37, 131, 142, 1);font-size: 12px;">4.9</span>
+<span style=" font-weight: bold; color: rgba(37, 131, 142, 1);font-size: 12px;">4.9</span>
</td>
<td style="text-align:center;">
-<span style=" font-weight: bold; color: rgba(72, 34, 116, 1);font-size: 9px;">3</span>
+<span style=" font-weight: bold; color: rgba(72, 34, 116, 1);font-size: 9px;">3</span>
</td>
<td style="text-align:center;">
-<span style=" font-weight: bold; color: rgba(62, 75, 138, 1);font-size: 10px;">1.4</span>
+<span style=" font-weight: bold; color: rgba(62, 75, 138, 1);font-size: 10px;">1.4</span>
</td>
<td style="text-align:center;">
-<span style=" font-weight: bold; color: rgba(53, 96, 141, 1);font-size: 11px;">0.2</span>
+<span style=" font-weight: bold; color: rgba(53, 96, 141, 1);font-size: 11px;">0.2</span>
</td>
<td style="text-align:center;">
-<span style=" font-weight: bold; color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: rgba(254, 160, 109, 1);">setosa</span>
+<span style=" font-weight: bold; color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: rgba(254, 160, 109, 1);">setosa</span>
</td>
</tr>
<tr>
<td style="text-align:center;">
-<span style=" font-weight: bold; color: rgba(57, 87, 140, 1);font-size: 10px;">4.7</span>
+<span style=" font-weight: bold; color: rgba(57, 87, 140, 1);font-size: 10px;">4.7</span>
</td>
<td style="text-align:center;">
-<span style=" font-weight: bold; color: rgba(56, 88, 140, 1);font-size: 10px;">3.2</span>
+<span style=" font-weight: bold; color: rgba(56, 88, 140, 1);font-size: 10px;">3.2</span>
</td>
<td style="text-align:center;">
-<span style=" font-weight: bold; color: rgba(68, 1, 84, 1);font-size: 8px;">1.3</span>
+<span style=" font-weight: bold; color: rgba(68, 1, 84, 1);font-size: 8px;">1.3</span>
</td>
<td style="text-align:center;">
-<span style=" font-weight: bold; color: rgba(53, 96, 141, 1);font-size: 11px;">0.2</span>
+<span style=" font-weight: bold; color: rgba(53, 96, 141, 1);font-size: 11px;">0.2</span>
</td>
<td style="text-align:center;">
-<span style=" font-weight: bold; color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: rgba(246, 110, 92, 1);">setosa</span>
+<span style=" font-weight: bold; color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: rgba(246, 110, 92, 1);">setosa</span>
</td>
</tr>
<tr>
<td style="text-align:center;">
-<span style=" font-weight: bold; color: rgba(67, 62, 133, 1);font-size: 10px;">4.6</span>
+<span style=" font-weight: bold; color: rgba(67, 62, 133, 1);font-size: 10px;">4.6</span>
</td>
<td style="text-align:center;">
-<span style=" font-weight: bold; color: rgba(67, 62, 133, 1);font-size: 10px;">3.1</span>
+<span style=" font-weight: bold; color: rgba(67, 62, 133, 1);font-size: 10px;">3.1</span>
</td>
<td style="text-align:center;">
-<span style=" font-weight: bold; color: rgba(37, 131, 142, 1);font-size: 12px;">1.5</span>
+<span style=" font-weight: bold; color: rgba(37, 131, 142, 1);font-size: 12px;">1.5</span>
</td>
<td style="text-align:center;">
-<span style=" font-weight: bold; color: rgba(53, 96, 141, 1);font-size: 11px;">0.2</span>
+<span style=" font-weight: bold; color: rgba(53, 96, 141, 1);font-size: 11px;">0.2</span>
</td>
<td style="text-align:center;">
-<span style=" font-weight: bold; color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: rgba(222, 73, 104, 1);">setosa</span>
+<span style=" font-weight: bold; color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: rgba(222, 73, 104, 1);">setosa</span>
</td>
</tr>
<tr>
<td style="text-align:center;">
-<span style=" font-weight: bold; color: rgba(31, 154, 138, 1);font-size: 13px;">5</span>
+<span style=" font-weight: bold; color: rgba(31, 154, 138, 1);font-size: 13px;">5</span>
</td>
<td style="text-align:center;">
-<span style=" font-weight: bold; color: rgba(41, 175, 127, 1);font-size: 14px;">3.6</span>
+<span style=" font-weight: bold; color: rgba(41, 175, 127, 1);font-size: 14px;">3.6</span>
</td>
<td style="text-align:center;">
-<span style=" font-weight: bold; color: rgba(62, 75, 138, 1);font-size: 10px;">1.4</span>
+<span style=" font-weight: bold; color: rgba(62, 75, 138, 1);font-size: 10px;">1.4</span>
</td>
<td style="text-align:center;">
-<span style=" font-weight: bold; color: rgba(53, 96, 141, 1);font-size: 11px;">0.2</span>
+<span style=" font-weight: bold; color: rgba(53, 96, 141, 1);font-size: 11px;">0.2</span>
</td>
<td style="text-align:center;">
-<span style=" font-weight: bold; color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: rgba(183, 55, 121, 1);">setosa</span>
+<span style=" font-weight: bold; color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: rgba(183, 55, 121, 1);">setosa</span>
</td>
</tr>
<tr>
<td style="text-align:center;">
-<span style=" font-weight: bold; color: rgba(187, 223, 39, 1);font-size: 16px;">5.4</span>
+<span style=" font-weight: bold; color: rgba(187, 223, 39, 1);font-size: 16px;">5.4</span>
</td>
<td style="text-align:center;">
-<span style=" font-weight: bold; color: rgba(187, 223, 39, 1);font-size: 16px;">3.9</span>
+<span style=" font-weight: bold; color: rgba(187, 223, 39, 1);font-size: 16px;">3.9</span>
</td>
<td style="text-align:center;">
-<span style=" font-weight: bold; color: rgba(187, 223, 39, 1);font-size: 16px;">1.7</span>
+<span style=" font-weight: bold; color: rgba(187, 223, 39, 1);font-size: 16px;">1.7</span>
</td>
<td style="text-align:center;">
-<span style=" font-weight: bold; color: rgba(187, 223, 39, 1);font-size: 16px;">0.4</span>
+<span style=" font-weight: bold; color: rgba(187, 223, 39, 1);font-size: 16px;">0.4</span>
</td>
<td style="text-align:center;">
-<span style=" font-weight: bold; color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: rgba(140, 41, 129, 1);">setosa</span>
+<span style=" font-weight: bold; color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: rgba(140, 41, 129, 1);">setosa</span>
</td>
</tr>
<tr>
<td style="text-align:center;">
-<span style=" font-weight: bold; color: rgba(67, 62, 133, 1);font-size: 10px;">4.6</span>
+<span style=" font-weight: bold; color: rgba(67, 62, 133, 1);font-size: 10px;">4.6</span>
</td>
<td style="text-align:center;">
-<span style=" font-weight: bold; color: rgba(37, 131, 142, 1);font-size: 12px;">3.4</span>
+<span style=" font-weight: bold; color: rgba(37, 131, 142, 1);font-size: 12px;">3.4</span>
</td>
<td style="text-align:center;">
-<span style=" font-weight: bold; color: rgba(62, 75, 138, 1);font-size: 10px;">1.4</span>
+<span style=" font-weight: bold; color: rgba(62, 75, 138, 1);font-size: 10px;">1.4</span>
</td>
<td style="text-align:center;">
-<span style=" font-weight: bold; color: rgba(34, 168, 132, 1);font-size: 13px;">0.3</span>
+<span style=" font-weight: bold; color: rgba(34, 168, 132, 1);font-size: 13px;">0.3</span>
</td>
<td style="text-align:center;">
-<span style=" font-weight: bold; color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: rgba(100, 26, 128, 1);">setosa</span>
+<span style=" font-weight: bold; color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: rgba(100, 26, 128, 1);">setosa</span>
</td>
</tr>
<tr>
<td style="text-align:center;">
-<span style=" font-weight: bold; color: rgba(31, 154, 138, 1);font-size: 13px;">5</span>
+<span style=" font-weight: bold; color: rgba(31, 154, 138, 1);font-size: 13px;">5</span>
</td>
<td style="text-align:center;">
-<span style=" font-weight: bold; color: rgba(37, 131, 142, 1);font-size: 12px;">3.4</span>
+<span style=" font-weight: bold; color: rgba(37, 131, 142, 1);font-size: 12px;">3.4</span>
</td>
<td style="text-align:center;">
-<span style=" font-weight: bold; color: rgba(37, 131, 142, 1);font-size: 12px;">1.5</span>
+<span style=" font-weight: bold; color: rgba(37, 131, 142, 1);font-size: 12px;">1.5</span>
</td>
<td style="text-align:center;">
-<span style=" font-weight: bold; color: rgba(53, 96, 141, 1);font-size: 11px;">0.2</span>
+<span style=" font-weight: bold; color: rgba(53, 96, 141, 1);font-size: 11px;">0.2</span>
</td>
<td style="text-align:center;">
-<span style=" font-weight: bold; color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: rgba(60, 15, 112, 1);">setosa</span>
+<span style=" font-weight: bold; color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: rgba(60, 15, 112, 1);">setosa</span>
</td>
</tr>
<tr>
<td style="text-align:center;">
-<span style=" font-weight: bold; color: rgba(68, 1, 84, 1);font-size: 8px;">4.4</span>
+<span style=" font-weight: bold; color: rgba(68, 1, 84, 1);font-size: 8px;">4.4</span>
</td>
<td style="text-align:center;">
-<span style=" font-weight: bold; color: rgba(68, 1, 84, 1);font-size: 8px;">2.9</span>
+<span style=" font-weight: bold; color: rgba(68, 1, 84, 1);font-size: 8px;">2.9</span>
</td>
<td style="text-align:center;">
-<span style=" font-weight: bold; color: rgba(62, 75, 138, 1);font-size: 10px;">1.4</span>
+<span style=" font-weight: bold; color: rgba(62, 75, 138, 1);font-size: 10px;">1.4</span>
</td>
<td style="text-align:center;">
-<span style=" font-weight: bold; color: rgba(53, 96, 141, 1);font-size: 11px;">0.2</span>
+<span style=" font-weight: bold; color: rgba(53, 96, 141, 1);font-size: 11px;">0.2</span>
</td>
<td style="text-align:center;">
-<span style=" font-weight: bold; color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: rgba(20, 14, 54, 1);">setosa</span>
+<span style=" font-weight: bold; color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: rgba(20, 14, 54, 1);">setosa</span>
</td>
</tr>
<tr>
<td style="text-align:center;">
-<span style=" font-weight: bold; color: rgba(37, 131, 142, 1);font-size: 12px;">4.9</span>
+<span style=" font-weight: bold; color: rgba(37, 131, 142, 1);font-size: 12px;">4.9</span>
</td>
<td style="text-align:center;">
-<span style=" font-weight: bold; color: rgba(67, 62, 133, 1);font-size: 10px;">3.1</span>
+<span style=" font-weight: bold; color: rgba(67, 62, 133, 1);font-size: 10px;">3.1</span>
</td>
<td style="text-align:center;">
-<span style=" font-weight: bold; color: rgba(37, 131, 142, 1);font-size: 12px;">1.5</span>
+<span style=" font-weight: bold; color: rgba(37, 131, 142, 1);font-size: 12px;">1.5</span>
</td>
<td style="text-align:center;">
-<span style=" font-weight: bold; color: rgba(68, 1, 84, 1);font-size: 8px;">0.1</span>
+<span style=" font-weight: bold; color: rgba(68, 1, 84, 1);font-size: 8px;">0.1</span>
</td>
<td style="text-align:center;">
-<span style=" font-weight: bold; color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: rgba(0, 0, 4, 1);">setosa</span>
+<span style=" font-weight: bold; color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: rgba(0, 0, 4, 1);">setosa</span>
</td>
</tr>
</tbody>
@@ -2308,7 +2308,7 @@
</div>
<div id="text-specification" class="section level2">
<h2>Text Specification</h2>
-<p>If you check the results of <code>cell_spec</code>, you will find that this function does nothing more than wrapping the text with appropriate HTML/LaTeX formatting syntax. The result of this function is just a vector of character strings. As a result, when you are writing a <code>rmarkdown</code> document or write some text in shiny apps, if you need extra markups other than <strong>bold</strong> or <em>italic</em>, you may use this function to <span style=" color: red;TRUE">color</span>, <span style=" TRUEfont-size: 16px;">change font size </span> or <span style="-webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg); transform: rotate(30deg); display: inline-block; "><span style=" TRUE">rotate</span></span> your text.</p>
+<p>If you check the results of <code>cell_spec</code>, you will find that this function does nothing more than wrapping the text with appropriate HTML/LaTeX formatting syntax. The result of this function is just a vector of character strings. As a result, when you are writing a <code>rmarkdown</code> document or write some text in shiny apps, if you need extra markups other than <strong>bold</strong> or <em>italic</em>, you may use this function to <span style=" color: red;TRUE">color</span>, <span style=" TRUEfont-size: 16px;">change font size </span> or <span style="-webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg); transform: rotate(30deg); display: inline-block; "><span style=" TRUE">rotate</span></span> your text.</p>
<p>An aliased function <code>text_spec</code> is also provided for a more literal writing experience. In HTML, there is no difference between these two functions.</p>
<pre class="r"><code>sometext <- strsplit(paste0(
"You can even try to make some crazy things like this paragraph. ",
@@ -2321,11 +2321,11 @@
collapse = " ")
# To display the text, type `r text_formatted` outside of the chunk</code></pre>
-<p><span style=" color: rgba(68, 1, 84, 1);TRUEfont-size: 5px;">You</span> <span style=" color: rgba(71, 13, 96, 1);TRUEfont-size: 6px;">can</span> <span style=" color: rgba(72, 24, 106, 1);TRUEfont-size: 6px;">even</span> <span style=" color: rgba(72, 34, 116, 1);TRUEfont-size: 7px;">try</span> <span style=" color: rgba(71, 45, 122, 1);TRUEfont-size: 7px;">to</span> <span style=" color: rgba(69, 54, 129, 1);TRUEfont-size: 8px;">make</span> <span style=" color: rgba(66, 64, 134, 1);TRUEfont-size: 8px;">some</span> <span style=" color: rgba(62, 73, 137, 1);TRUEfont-size: 9px;">crazy</span> <span style=" color: rgba(59, 81, 139, 1);TRUEfont-size: 9px;">things</span> <span style=" color: rgba(55, 90, 140, 1);TRUEfont-size: 10px;">like</span> <span style=" color: rgba(51, 98, 141, 1);TRUEfont-size: 10px;">this</span> <span style=" color: rgba(48, 106, 142, 1);TRUEfont-size: 11px;">paragraph.</span> <span style=" color: rgba(44, 113, 142, 1);TRUEfont-size: 11px;">It</span> <span style=" color: rgba(41, 121, 142, 1);TRUEfont-size: 12px;">may</span> <span style=" color: rgba(38, 129, 142, 1);TRUEfont-size: 12px;">seem</span> <span style=" color: rgba(35, 136, 142, 1);TRUEfont-size: 13px;">like</span> <span style=" color: rgba(33, 144, 141, 1);TRUEfont-size: 13px;">a</span> <span style=" color: rgba(31, 150, 139, 1);TRUEfont-size: 14px;">useless</span> <span style=" color: rgba(31, 158, 137, 1);TRUEfont-size: 14px;">feature</span> <span style=" color: rgba(33, 165, 133, 1);TRUEfont-size: 15px;">right</span> <span style=" color: rgba(38, 173, 129, 1);TRUEfont-size: 15px;">now</span> <span style=" color: rgba(48, 180, 124, 1);TRUEfont-size: 16px;">but</span> <span style=" color: rgba(59, 187, 117, 1);TRUEfont-size: 16px;">it’s</span> <span style=" color: rgba(74, 193, 109, 1);TRUEfont-size: 17px;">so</span> <span style=" color: rgba(90, 200, 100, 1);TRUEfont-size: 17px;">cool</span> <span style=" color: rgba(108, 205, 90, 1);TRUEfont-size: 18px;">and</span> <span style=" color: rgba(127, 211, 78, 1);TRUEfont-size: 18px;">nobody</span> <span style=" color: rgba(145, 215, 66, 1);TRUEfont-size: 19px;">can</span> <span style=" color: rgba(166, 219, 53, 1);TRUEfont-size: 19px;">resist.</span> <span style=" color: rgba(187, 223, 39, 1);TRUEfont-size: 20px;">;)</span></p>
+<p><span style=" color: rgba(68, 1, 84, 1);TRUEfont-size: 5px;">You</span> <span style=" color: rgba(71, 13, 96, 1);TRUEfont-size: 6px;">can</span> <span style=" color: rgba(72, 24, 106, 1);TRUEfont-size: 6px;">even</span> <span style=" color: rgba(72, 34, 116, 1);TRUEfont-size: 7px;">try</span> <span style=" color: rgba(71, 45, 122, 1);TRUEfont-size: 7px;">to</span> <span style=" color: rgba(69, 54, 129, 1);TRUEfont-size: 8px;">make</span> <span style=" color: rgba(66, 64, 134, 1);TRUEfont-size: 8px;">some</span> <span style=" color: rgba(62, 73, 137, 1);TRUEfont-size: 9px;">crazy</span> <span style=" color: rgba(59, 81, 139, 1);TRUEfont-size: 9px;">things</span> <span style=" color: rgba(55, 90, 140, 1);TRUEfont-size: 10px;">like</span> <span style=" color: rgba(51, 98, 141, 1);TRUEfont-size: 10px;">this</span> <span style=" color: rgba(48, 106, 142, 1);TRUEfont-size: 11px;">paragraph.</span> <span style=" color: rgba(44, 113, 142, 1);TRUEfont-size: 11px;">It</span> <span style=" color: rgba(41, 121, 142, 1);TRUEfont-size: 12px;">may</span> <span style=" color: rgba(38, 129, 142, 1);TRUEfont-size: 12px;">seem</span> <span style=" color: rgba(35, 136, 142, 1);TRUEfont-size: 13px;">like</span> <span style=" color: rgba(33, 144, 141, 1);TRUEfont-size: 13px;">a</span> <span style=" color: rgba(31, 150, 139, 1);TRUEfont-size: 14px;">useless</span> <span style=" color: rgba(31, 158, 137, 1);TRUEfont-size: 14px;">feature</span> <span style=" color: rgba(33, 165, 133, 1);TRUEfont-size: 15px;">right</span> <span style=" color: rgba(38, 173, 129, 1);TRUEfont-size: 15px;">now</span> <span style=" color: rgba(48, 180, 124, 1);TRUEfont-size: 16px;">but</span> <span style=" color: rgba(59, 187, 117, 1);TRUEfont-size: 16px;">it’s</span> <span style=" color: rgba(74, 193, 109, 1);TRUEfont-size: 17px;">so</span> <span style=" color: rgba(90, 200, 100, 1);TRUEfont-size: 17px;">cool</span> <span style=" color: rgba(108, 205, 90, 1);TRUEfont-size: 18px;">and</span> <span style=" color: rgba(127, 211, 78, 1);TRUEfont-size: 18px;">nobody</span> <span style=" color: rgba(145, 215, 66, 1);TRUEfont-size: 19px;">can</span> <span style=" color: rgba(166, 219, 53, 1);TRUEfont-size: 19px;">resist.</span> <span style=" color: rgba(187, 223, 39, 1);TRUEfont-size: 20px;">;)</span></p>
</div>
<div id="tooltip" class="section level2">
<h2>Tooltip</h2>
-<p>It’s very easy to add a tooltip to text via <code>cell_spec</code>. For example, <code>text_spec("tooltip", color = "red", tooltip = "Hello World")</code> will give you something like <span style=" color: red;TRUE" data-toggle="tooltip" data-placement="right" title="Hello World">Hover over me</span> (you need to wait for a few seconds before your browser renders it).</p>
+<p>It’s very easy to add a tooltip to text via <code>cell_spec</code>. For example, <code>text_spec("tooltip", color = "red", tooltip = "Hello World")</code> will give you something like <span style=" color: red;TRUE" data-toggle="tooltip" data-placement="right" title="Hello World">Hover over me</span> (you need to wait for a few seconds before your browser renders it).</p>
<p>Note that the original browser-based tooltip is slow. If you want to have a faster response, you may want to initialize bootstrap’s tooltip by putting the following HTML code on the page.</p>
<pre><code><script>
$(document).ready(function(){
@@ -2377,7 +2377,7 @@
top
</td>
<td style="text-align:left;">
-<span style=" " data-toggle="popover" data-trigger="hover" data-placement="top" data-content="top">Message on top</span>
+<span style=" " data-toggle="popover" data-trigger="hover" data-placement="top" data-content="top">Message on top</span>
</td>
</tr>
<tr>
@@ -2385,7 +2385,7 @@
bottom
</td>
<td style="text-align:left;">
-<span style=" " data-toggle="popover" data-trigger="hover" data-placement="bottom" data-content="bottom">Message on bottom</span>
+<span style=" " data-toggle="popover" data-trigger="hover" data-placement="bottom" data-content="bottom">Message on bottom</span>
</td>
</tr>
<tr>
@@ -2393,7 +2393,7 @@
right
</td>
<td style="text-align:left;">
-<span style=" " data-toggle="popover" data-trigger="hover" data-placement="right" data-content="right">Message on right</span>
+<span style=" " data-toggle="popover" data-trigger="hover" data-placement="right" data-content="right">Message on right</span>
</td>
</tr>
<tr>
@@ -2401,7 +2401,7 @@
left
</td>
<td style="text-align:left;">
-<span style=" " data-toggle="popover" data-trigger="hover" data-placement="left" data-content="left">Message on left</span>
+<span style=" " data-toggle="popover" data-trigger="hover" data-placement="left" data-content="left">Message on left</span>
</td>
</tr>
</tbody>
@@ -2409,7 +2409,7 @@
</div>
<div id="links" class="section level2">
<h2>Links</h2>
-<p>You can add links to text via <code>text_spec("Google", link = "https://google.com")</code>: <a href="https://google.com" style=" TRUE">Google</a>. If you want your hover message to be more obvious, it might be a good idea to put a <code>#</code> (go back to the top of the page) or <code>javascript:void(0)</code> (literally do nothing) in the <code>link</code> option. <code>text_spec("Hover on me", link = "javascript:void(0)", popover = "Hello")</code>: <a href="javascript:void(0)" style=" TRUE" data-toggle="popover" data-trigger="hover" data-placement="right" data-content="Hello">Hover on me</a></p>
+<p>You can add links to text via <code>text_spec("Google", link = "https://google.com")</code>: <a href="https://google.com" style=" TRUE">Google</a>. If you want your hover message to be more obvious, it might be a good idea to put a <code>#</code> (go back to the top of the page) or <code>javascript:void(0)</code> (literally do nothing) in the <code>link</code> option. <code>text_spec("Hover on me", link = "javascript:void(0)", popover = "Hello")</code>: <a href="javascript:void(0)" style=" TRUE" data-toggle="popover" data-trigger="hover" data-placement="right" data-content="Hello">Hover on me</a></p>
</div>
<div id="integration-with-formattable" class="section level2">
<h2>Integration with <code>formattable</code></h2>
@@ -2474,10 +2474,10 @@
<span style="display: block; padding: 0 4px; border-radius: 4px; background-color: #ffcc6f">21.0</span>
</td>
<td style="text-align:left;">
-<span style="-webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); -ms-transform: rotate(60deg); -o-transform: rotate(60deg); transform: rotate(60deg); display: inline-block; "><span style=" color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;text-align: center;">6</span></span>
+<span style="-webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); -ms-transform: rotate(60deg); -o-transform: rotate(60deg); transform: rotate(60deg); display: inline-block; "><span style=" color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;text-align: center;">6</span></span>
</td>
<td style="text-align:left;">
-<span style=" font-style: italic; color: green;">160</span>
+<span style=" font-style: italic; color: green;">160</span>
</td>
<td style="text-align:left;width: 3cm; ">
<span style="display: inline-block; direction: rtl; border-radius: 4px; padding-right: 2px; background-color: lightgreen; width: 62.86%">110</span>
@@ -2491,10 +2491,10 @@
<span style="display: block; padding: 0 4px; border-radius: 4px; background-color: #ffcc6f">21.0</span>
</td>
<td style="text-align:left;">
-<span style="-webkit-transform: rotate(120deg); -moz-transform: rotate(120deg); -ms-transform: rotate(120deg); -o-transform: rotate(120deg); transform: rotate(120deg); display: inline-block; "><span style=" color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;text-align: center;">6</span></span>
+<span style="-webkit-transform: rotate(120deg); -moz-transform: rotate(120deg); -ms-transform: rotate(120deg); -o-transform: rotate(120deg); transform: rotate(120deg); display: inline-block; "><span style=" color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;text-align: center;">6</span></span>
</td>
<td style="text-align:left;">
-<span style=" font-style: italic; color: green;">160</span>
+<span style=" font-style: italic; color: green;">160</span>
</td>
<td style="text-align:left;width: 3cm; ">
<span style="display: inline-block; direction: rtl; border-radius: 4px; padding-right: 2px; background-color: lightgreen; width: 62.86%">110</span>
@@ -2508,10 +2508,10 @@
<span style="display: block; padding: 0 4px; border-radius: 4px; background-color: #ffa500">22.8</span>
</td>
<td style="text-align:left;">
-<span style="-webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); display: inline-block; "><span style=" color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;text-align: center;">4</span></span>
+<span style="-webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); display: inline-block; "><span style=" color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;text-align: center;">4</span></span>
</td>
<td style="text-align:left;">
-<span style=" font-style: italic; color: green;">108</span>
+<span style=" font-style: italic; color: green;">108</span>
</td>
<td style="text-align:left;width: 3cm; ">
<span style="display: inline-block; direction: rtl; border-radius: 4px; padding-right: 2px; background-color: lightgreen; width: 53.14%">93</span>
@@ -2525,10 +2525,10 @@
<span style="display: block; padding: 0 4px; border-radius: 4px; background-color: #ffc357">21.4</span>
</td>
<td style="text-align:left;">
-<span style="-webkit-transform: rotate(240deg); -moz-transform: rotate(240deg); -ms-transform: rotate(240deg); -o-transform: rotate(240deg); transform: rotate(240deg); display: inline-block; "><span style=" color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;text-align: center;">6</span></span>
+<span style="-webkit-transform: rotate(240deg); -moz-transform: rotate(240deg); -ms-transform: rotate(240deg); -o-transform: rotate(240deg); transform: rotate(240deg); display: inline-block; "><span style=" color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;text-align: center;">6</span></span>
</td>
<td style="text-align:left;">
-<span style=" font-weight: bold; color: red;">258</span>
+<span style=" font-weight: bold; color: red;">258</span>
</td>
<td style="text-align:left;width: 3cm; ">
<span style="display: inline-block; direction: rtl; border-radius: 4px; padding-right: 2px; background-color: lightgreen; width: 62.86%">110</span>
@@ -2542,10 +2542,10 @@
<span style="display: block; padding: 0 4px; border-radius: 4px; background-color: #ffffff">18.7</span>
</td>
<td style="text-align:left;">
-<span style="-webkit-transform: rotate(300deg); -moz-transform: rotate(300deg); -ms-transform: rotate(300deg); -o-transform: rotate(300deg); transform: rotate(300deg); display: inline-block; "><span style=" color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;text-align: center;">8</span></span>
+<span style="-webkit-transform: rotate(300deg); -moz-transform: rotate(300deg); -ms-transform: rotate(300deg); -o-transform: rotate(300deg); transform: rotate(300deg); display: inline-block; "><span style=" color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;text-align: center;">8</span></span>
</td>
<td style="text-align:left;">
-<span style=" font-weight: bold; color: red;">360</span>
+<span style=" font-weight: bold; color: red;">360</span>
</td>
<td style="text-align:left;width: 3cm; ">
<span style="display: inline-block; direction: rtl; border-radius: 4px; padding-right: 2px; background-color: lightgreen; width: 100.00%">175</span>
@@ -3543,7 +3543,7 @@
1
</td>
<td style="text-align:center;">
-1
+0
</td>
</tr>
<tr>
@@ -3567,7 +3567,7 @@
4
</td>
<td style="text-align:center;">
-0
+1
</td>
</tr>
<tr>
@@ -3583,7 +3583,7 @@
6
</td>
<td style="text-align:center;">
-1
+0
</td>
</tr>
<tr>
@@ -3610,7 +3610,7 @@
9
</td>
<td style="text-align:center;">
-1
+0
</td>
</tr>
<tr>
@@ -3640,7 +3640,7 @@
12
</td>
<td style="text-align:center;">
-0
+1
</td>
</tr>
<tr>
@@ -3667,7 +3667,7 @@
15
</td>
<td style="text-align:center;">
-0
+1
</td>
</tr>
</tbody>