update package vignette with footnote.
diff --git a/docs/awesome_table_in_html.html b/docs/awesome_table_in_html.html
index 09e3258..3931fb2 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-10" />
+<meta name="date" content="2018-01-11" />
<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-10</em></h4>
+<h4 class="date"><em>2018-01-11</em></h4>
</div>
@@ -3543,7 +3543,7 @@
1
</td>
<td style="text-align:center;">
-0
+1
</td>
</tr>
<tr>
@@ -3559,7 +3559,7 @@
3
</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>
@@ -3591,7 +3591,7 @@
7
</td>
<td style="text-align:center;">
-1
+0
</td>
</tr>
<tr>
@@ -3602,7 +3602,7 @@
8
</td>
<td style="text-align:center;">
-0
+1
</td>
</tr>
<tr>
@@ -3610,7 +3610,7 @@
9
</td>
<td style="text-align:center;">
-1
+0
</td>
</tr>
<tr>
@@ -3632,7 +3632,7 @@
11
</td>
<td style="text-align:center;">
-0
+1
</td>
</tr>
<tr>
@@ -3640,7 +3640,7 @@
12
</td>
<td style="text-align:center;">
-1
+0
</td>
</tr>
<tr>
@@ -3667,7 +3667,7 @@
15
</td>
<td style="text-align:center;">
-0
+1
</td>
</tr>
</tbody>
@@ -3676,35 +3676,39 @@
</div>
<div id="table-footnote" class="section level1">
<h1>Table Footnote</h1>
-<div id="notation-systems" class="section level2">
-<h2>Notation systems</h2>
-<p>You can also use <code>add_footnote()</code> function from this package. You will need to supply a character vector with each element as one footnote. You may select from <code>number</code>, <code>alphabet</code> and <code>symbol</code> for different types of notations. Example are listed below.</p>
-<div id="alphabet" class="section level3">
-<h3>Alphabet</h3>
-<pre class="r"><code>kable(dt, "html") %>%
- kable_styling("striped") %>%
- add_footnote(c("Footnote 1", "Have a good day."), notation = "alphabet")</code></pre>
-<table class="table table-striped" style="margin-left: auto; margin-right: auto;">
+<blockquote>
+<p>Now it’s recommended to use the new <code>footnote</code> function instead of <code>add_footnote</code> to make table footnotes.</p>
+</blockquote>
+<p>Documentations for <code>add_footnote</code> can be found <a href="http://haozhu233.github.io/kableExtra/legacy_features#add_footnote">here</a>.</p>
+<p>There are four notation systems in <code>footnote</code>, namely <code>general</code>, <code>number</code>, <code>alphabet</code> and <code>symbol</code>. The last three types of footnotes will be labeled with corresponding marks while <code>general</code> won’t be labeled. You can pick any one of these systems or choose to display them all for fulfill the APA table footnotes requirements.</p>
+<pre class="r"><code>kable(dt, "html", align = "c") %>%
+ kable_styling(full_width = F) %>%
+ footnote(general = "Here is a general comments of the table. ",
+ number = c("Footnote 1; ", "Footnote 2; "),
+ alphabet = c("Footnote A; ", "Footnote B; "),
+ symbol = c("Footnote Symbol 1; ", "Footnote Symbol 2")
+ )</code></pre>
+<table class="table" style="width: auto !important; margin-left: auto; margin-right: auto;">
<thead>
<tr>
<th style="text-align:left;">
</th>
-<th style="text-align:right;">
+<th style="text-align:center;">
mpg
</th>
-<th style="text-align:right;">
+<th style="text-align:center;">
cyl
</th>
-<th style="text-align:right;">
+<th style="text-align:center;">
disp
</th>
-<th style="text-align:right;">
+<th style="text-align:center;">
hp
</th>
-<th style="text-align:right;">
+<th style="text-align:center;">
drat
</th>
-<th style="text-align:right;">
+<th style="text-align:center;">
wt
</th>
</tr>
@@ -3714,22 +3718,22 @@
<td style="text-align:left;">
Mazda RX4
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
21.0
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
6
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
160
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
110
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
3.90
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
2.620
</td>
</tr>
@@ -3737,22 +3741,22 @@
<td style="text-align:left;">
Mazda RX4 Wag
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
21.0
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
6
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
160
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
110
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
3.90
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
2.875
</td>
</tr>
@@ -3760,22 +3764,22 @@
<td style="text-align:left;">
Datsun 710
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
22.8
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
4
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
108
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
93
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
3.85
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
2.320
</td>
</tr>
@@ -3783,22 +3787,22 @@
<td style="text-align:left;">
Hornet 4 Drive
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
21.4
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
6
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
258
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
110
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
3.08
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
3.215
</td>
</tr>
@@ -3806,66 +3810,101 @@
<td style="text-align:left;">
Hornet Sportabout
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
18.7
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
8
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
360
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
175
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
3.15
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
3.440
</td>
</tr>
</tbody>
<tfoot>
<tr>
-<td style="padding: 0; border:0;" colspan="100%">
-<sup>a</sup> Footnote 1
+<td style="padding: 0; border: 0;" colspan="100%">
+<strong>Note: </strong>
</td>
</tr>
<tr>
-<td style="padding: 0; border:0;" colspan="100%">
-<sup>b</sup> Have a good day.
+<td style="padding: 0; border: 0;" colspan="100%">
+<sup></sup> Here is a general comments of the table.
+</td>
+</tr>
+<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> Footnote 2;
+</td>
+</tr>
+<tr>
+<td style="padding: 0; border: 0;" colspan="100%">
+<sup>a</sup> Footnote A;
+</td>
+</tr>
+<tr>
+<td style="padding: 0; border: 0;" colspan="100%">
+<sup>b</sup> Footnote B;
+</td>
+</tr>
+<tr>
+<td style="padding: 0; border: 0;" colspan="100%">
+<sup>*</sup> Footnote Symbol 1;
+</td>
+</tr>
+<tr>
+<td style="padding: 0; border: 0;" colspan="100%">
+<sup>†</sup> Footnote Symbol 2
</td>
</tr>
</tfoot>
</table>
-</div>
-<div id="number" class="section level3">
-<h3>Number</h3>
-<pre class="r"><code>kable(dt, "html") %>%
- kable_styling("striped") %>%
- add_footnote(c("Footnote 1", "Have a good day."), notation = "number")</code></pre>
-<table class="table table-striped" style="margin-left: auto; margin-right: auto;">
+<p>You can also specify title for each category by using the <code>***_title</code> arguments. Default value for <code>general_title</code> is “Note:” and “” for the rest three. You can also change the order using <code>footnote_order</code>. You can even display footnote as chunk texts (default is as a list) using <code>footnote_as_chunk</code>.</p>
+<pre class="r"><code>kable(dt, "html", align = "c") %>%
+ kable_styling(full_width = F) %>%
+ footnote(general = "Here is a general comments of the table. ",
+ number = c("Footnote 1; ", "Footnote 2; "),
+ alphabet = c("Footnote A; ", "Footnote B; "),
+ symbol = c("Footnote Symbol 1; ", "Footnote Symbol 2"),
+ general_title = "General: ", number_title = "Type I: ",
+ alphabet_title = "Type II: ", symbol_title = "Type III: ",
+ footnote_as_chunk = T
+ )</code></pre>
+<table class="table" style="width: auto !important; margin-left: auto; margin-right: auto;">
<thead>
<tr>
<th style="text-align:left;">
</th>
-<th style="text-align:right;">
+<th style="text-align:center;">
mpg
</th>
-<th style="text-align:right;">
+<th style="text-align:center;">
cyl
</th>
-<th style="text-align:right;">
+<th style="text-align:center;">
disp
</th>
-<th style="text-align:right;">
+<th style="text-align:center;">
hp
</th>
-<th style="text-align:right;">
+<th style="text-align:center;">
drat
</th>
-<th style="text-align:right;">
+<th style="text-align:center;">
wt
</th>
</tr>
@@ -3875,22 +3914,22 @@
<td style="text-align:left;">
Mazda RX4
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
21.0
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
6
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
160
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
110
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
3.90
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
2.620
</td>
</tr>
@@ -3898,22 +3937,22 @@
<td style="text-align:left;">
Mazda RX4 Wag
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
21.0
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
6
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
160
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
110
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
3.90
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
2.875
</td>
</tr>
@@ -3921,22 +3960,22 @@
<td style="text-align:left;">
Datsun 710
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
22.8
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
4
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
108
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
93
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
3.85
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
2.320
</td>
</tr>
@@ -3944,22 +3983,22 @@
<td style="text-align:left;">
Hornet 4 Drive
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
21.4
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
6
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
258
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
110
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
3.08
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
3.215
</td>
</tr>
@@ -3967,66 +4006,84 @@
<td style="text-align:left;">
Hornet Sportabout
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
18.7
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
8
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
360
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
175
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
3.15
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
3.440
</td>
</tr>
</tbody>
<tfoot>
<tr>
-<td style="padding: 0; border:0;" colspan="100%">
-<sup>1</sup> Footnote 1
+<td style="padding: 0; border: 0;" colspan="100%">
+<strong>General: </strong> <sup></sup> Here is a general comments of the table.
</td>
</tr>
<tr>
-<td style="padding: 0; border:0;" colspan="100%">
-<sup>2</sup> Have a good day.
+<td style="padding: 0; border: 0;" colspan="100%">
+<strong>Type I: </strong> <sup>1</sup> Footnote 1; <sup>2</sup> Footnote 2;
+</td>
+</tr>
+<tr>
+<td style="padding: 0; border: 0;" colspan="100%">
+<strong>Type II: </strong> <sup>a</sup> Footnote A; <sup>b</sup> Footnote B;
+</td>
+</tr>
+<tr>
+<td style="padding: 0; border: 0;" colspan="100%">
+<strong>Type III: </strong> <sup>*</sup> Footnote Symbol 1; <sup>†</sup> Footnote Symbol 2
</td>
</tr>
</tfoot>
</table>
-</div>
-<div id="symbol" class="section level3">
-<h3>Symbol</h3>
-<pre class="r"><code>kable(dt, "html") %>%
- kable_styling("striped") %>%
- add_footnote(c("Footnote 1", "Footnote 2", "Footnote 3"), notation = "symbol")</code></pre>
-<table class="table table-striped" style="margin-left: auto; margin-right: auto;">
+<p>If you need to add footnote marks in table, you need to do it manually (no fancy) using <code>footnote_mark_***()</code>. Remember that similar with <code>cell_spec</code>, you need to tell this function whether you want it to do it in <code>HTML</code> (default) or <code>LaTeX</code>. You can set it for all using the <code>knitr.table.format</code> global option. ALso, if you have ever use <code>footnote_mark_***()</code>, you need to put <code>escape = F</code> in your <code>kable</code> function to avoid escaping of special characters.</p>
+<pre class="r"><code>dt_footnote <- dt
+names(dt_footnote)[2] <- paste0(names(dt_footnote)[2],
+ footnote_marker_symbol(1))
+row.names(dt_footnote)[4] <- paste0(row.names(dt_footnote)[4],
+ footnote_marker_alphabet(1))
+kable(dt_footnote, "html", align = "c",
+ # Remember this escape = F
+ escape = F) %>%
+ kable_styling(full_width = F) %>%
+ footnote(alphabet = "Footnote A; ",
+ symbol = "Footnote Symbol 1; ",
+ alphabet_title = "Type II: ", symbol_title = "Type III: ",
+ footnote_as_chunk = T)</code></pre>
+<table class="table" style="width: auto !important; margin-left: auto; margin-right: auto;">
<thead>
<tr>
<th style="text-align:left;">
</th>
-<th style="text-align:right;">
+<th style="text-align:center;">
mpg
</th>
-<th style="text-align:right;">
-cyl
+<th style="text-align:center;">
+cyl<sup>*</sup>
</th>
-<th style="text-align:right;">
+<th style="text-align:center;">
disp
</th>
-<th style="text-align:right;">
+<th style="text-align:center;">
hp
</th>
-<th style="text-align:right;">
+<th style="text-align:center;">
drat
</th>
-<th style="text-align:right;">
+<th style="text-align:center;">
wt
</th>
</tr>
@@ -4036,22 +4093,22 @@
<td style="text-align:left;">
Mazda RX4
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
21.0
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
6
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
160
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
110
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
3.90
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
2.620
</td>
</tr>
@@ -4059,22 +4116,22 @@
<td style="text-align:left;">
Mazda RX4 Wag
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
21.0
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
6
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
160
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
110
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
3.90
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
2.875
</td>
</tr>
@@ -4082,45 +4139,45 @@
<td style="text-align:left;">
Datsun 710
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
22.8
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
4
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
108
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
93
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
3.85
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
2.320
</td>
</tr>
<tr>
<td style="text-align:left;">
-Hornet 4 Drive
+Hornet 4 Drive<sup>a</sup>
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
21.4
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
6
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
258
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
110
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
3.08
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
3.215
</td>
</tr>
@@ -4128,235 +4185,40 @@
<td style="text-align:left;">
Hornet Sportabout
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
18.7
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
8
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
360
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
175
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
3.15
</td>
-<td style="text-align:right;">
+<td style="text-align:center;">
3.440
</td>
</tr>
</tbody>
<tfoot>
<tr>
-<td style="padding: 0; border:0;" colspan="100%">
-<sup>*</sup> Footnote 1
+<td style="padding: 0; border: 0;" colspan="100%">
+<strong>Type II: </strong> <sup>a</sup> Footnote A;
</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 style="padding: 0; border: 0;" colspan="100%">
+<strong>Type III: </strong> <sup>*</sup> Footnote Symbol 1;
</td>
</tr>
</tfoot>
</table>
</div>
-</div>
-<div id="in-table-markers" class="section level2">
-<h2>In-table markers</h2>
-<p>By design, <code>add_footnote()</code> will transform any <code>[note]</code> to in-table footnote markers.</p>
-<pre class="r"><code>kable(dt, "html", caption = "Demo Table[note]") %>%
- kable_styling("striped") %>%
- add_header_above(c(" ", "Group 1[note]" = 3, "Group 2[note]" = 3)) %>%
- add_footnote(c("This table is from mtcars",
- "Group 1 contains mpg, cyl and disp",
- "Group 2 contains hp, drat and wt"),
- notation = "symbol")</code></pre>
-<table class="table table-striped" style="margin-left: auto; margin-right: auto;">
-<caption>
-Demo Table<sup>*</sup>
-</caption>
-<thead>
-<tr>
-<th style="border-bottom:hidden" colspan="1">
-</th>
-<th style="text-align:center; border-bottom:hidden; padding-bottom:0; padding-left:3px;padding-right:3px;" colspan="3">
-<div style="border-bottom: 1px solid #ddd; padding-bottom: 5px;">
-Group 1<sup>†</sup>
-</div>
-</th>
-<th style="text-align:center; border-bottom:hidden; padding-bottom:0; padding-left:3px;padding-right:3px;" colspan="3">
-<div style="border-bottom: 1px solid #ddd; padding-bottom: 5px;">
-Group 2<sup>‡</sup>
-</div>
-</th>
-</tr>
-<tr>
-<th style="text-align:left;">
-</th>
-<th style="text-align:right;">
-mpg
-</th>
-<th style="text-align:right;">
-cyl
-</th>
-<th style="text-align:right;">
-disp
-</th>
-<th style="text-align:right;">
-hp
-</th>
-<th style="text-align:right;">
-drat
-</th>
-<th style="text-align:right;">
-wt
-</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td style="text-align:left;">
-Mazda RX4
-</td>
-<td style="text-align:right;">
-21.0
-</td>
-<td style="text-align:right;">
-6
-</td>
-<td style="text-align:right;">
-160
-</td>
-<td style="text-align:right;">
-110
-</td>
-<td style="text-align:right;">
-3.90
-</td>
-<td style="text-align:right;">
-2.620
-</td>
-</tr>
-<tr>
-<td style="text-align:left;">
-Mazda RX4 Wag
-</td>
-<td style="text-align:right;">
-21.0
-</td>
-<td style="text-align:right;">
-6
-</td>
-<td style="text-align:right;">
-160
-</td>
-<td style="text-align:right;">
-110
-</td>
-<td style="text-align:right;">
-3.90
-</td>
-<td style="text-align:right;">
-2.875
-</td>
-</tr>
-<tr>
-<td style="text-align:left;">
-Datsun 710
-</td>
-<td style="text-align:right;">
-22.8
-</td>
-<td style="text-align:right;">
-4
-</td>
-<td style="text-align:right;">
-108
-</td>
-<td style="text-align:right;">
-93
-</td>
-<td style="text-align:right;">
-3.85
-</td>
-<td style="text-align:right;">
-2.320
-</td>
-</tr>
-<tr>
-<td style="text-align:left;">
-Hornet 4 Drive
-</td>
-<td style="text-align:right;">
-21.4
-</td>
-<td style="text-align:right;">
-6
-</td>
-<td style="text-align:right;">
-258
-</td>
-<td style="text-align:right;">
-110
-</td>
-<td style="text-align:right;">
-3.08
-</td>
-<td style="text-align:right;">
-3.215
-</td>
-</tr>
-<tr>
-<td style="text-align:left;">
-Hornet Sportabout
-</td>
-<td style="text-align:right;">
-18.7
-</td>
-<td style="text-align:right;">
-8
-</td>
-<td style="text-align:right;">
-360
-</td>
-<td style="text-align:right;">
-175
-</td>
-<td style="text-align:right;">
-3.15
-</td>
-<td style="text-align:right;">
-3.440
-</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>
<div id="html-only-features" class="section level1">
<h1>HTML Only Features</h1>
<div id="scroll-box" class="section level2">