diff --git a/docs/awesome_table_in_pdf.Rmd b/docs/awesome_table_in_pdf.Rmd
index 2d37e1b..aa7888c 100644
--- a/docs/awesome_table_in_pdf.Rmd
+++ b/docs/awesome_table_in_pdf.Rmd
@@ -65,9 +65,9 @@
 library(kableExtra)
 ```
 
-If you are using R Sweave, beamer, tufte or some customized rmarkdown templates, you can put the following meta data into the `yaml` section. If you are familar with LaTeX and you know what you are doing, feel free to remove unnecessary packages from the list. 
+If you are using R Sweave, beamer, R package vignette template, tufte or some customized rmarkdown templates, you can put the following meta data into the `yaml` section. If you are familar with LaTeX and you know what you are doing, feel free to remove unnecessary packages from the list. 
 
-```{yaml}
+```
 header-includes:
   - \usepackage{booktabs}
   - \usepackage{longtable}
@@ -198,6 +198,67 @@
   row_spec(3:5, bold = T, color = "white", background = "black")
 ```
 
+# Cell/Text Specification
+Function `cell_spec` is introduced in version 0.6.0 of `kableExtra`. Unlike `column_spec` and `row_spec`, **this function is designed to be used before the data.frame gets into the `kable` function**. Comparing with figuring out a list of 2 dimentional index for targeted cells, this design is way easier to learn and use and it fits perfectly well with `dplyr`'s `mutate` and `summarize` functions. With this design, there are two things to be noted:
+* Since `cell_spec` generates raw `HTML` or `LaTeX` code, make sure you remember to put `escape = FALSE` in `kable`. At the same time, you have to escape special symbols including `%` manually by yourself
+* `cell_spec` needs a way to know whether you want `html` or `latex`. You can specify it locally in function or globally via the `options(knitr.table.format = "latex")` method as suggested at the beginning. If you don't provide anything, this function will output as HTML by default. 
+
+Currently, `cell_spec` supports features including bold, italic, monospace, text color, background color, align, font size & rotation angle. More features may be added in the future. Please see function documentations as reference. 
+
+## Conditional logic
+It is very easy to use `cell_spec` with conditional logic. Here is an example.
+```{r}
+suppressMessages(library(dplyr))
+mtcars[1:10, 1:2] %>%
+  mutate(
+    # Since we are using tibble, we need to get the rownames
+    car = row.names(.),
+    # You don't need "latex" if you have ever defined options(knitr.table.format)
+    mpg = cell_spec(mpg, "latex", color = ifelse(mpg > 20, "green", "red")),
+    cyl = cell_spec(cyl, "latex", color = "white", align = "c", angle = 90, 
+                    background = factor(cyl, c(4, 6, 8), 
+                                        c("#666666", "#999999", "#BBBBBB")))
+  ) %>%
+  select(car, mpg, cyl) %>%
+  kable("latex", escape = F, booktabs = T, linesep = "")
+```
+
+## Visualize data with Viridis Color
+This package also comes with a few helper functions, including `spec_color`, `spec_font_size` & `spec_angle`. These functions can rescale continuous variables to certain scales. For example, function `spec_color` would map a continuous variable to any [viridis color palettes](https://cran.r-project.org/web/packages/viridis/vignettes/intro-to-viridis.html). It offers a very visually impactful representation in a tabular format. 
+
+```{r}
+iris[1:10, ] %>%
+  mutate_if(is.numeric, function(x) {
+    cell_spec(x, bold = T, color = spec_color(x, end = 0.9),
+              font_size = spec_font_size(x))
+  }) %>%
+  mutate(Species = cell_spec(
+    Species, color = "white", bold = T,
+    background = spec_color(1:10, end = 0.9, option = "A", direction = -1)
+  )) %>%
+  kable("latex", escape = F, booktabs = T, linesep = "", align = "c")
+```
+
+In the example above, I'm using the `mutate` functions from `dplyr`. You don't have to use it. Base R solutions like `iris$Species <- cell_spec(iris$Species, color = "red")` also works. 
+
+## Text Specification
+If you check the results of `cell_spec`, 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 `rmarkdown` document or write some text in shiny apps, if you need extra markups other than **bold** or *italic*, you may use this function to `r text_spec("color", color = "red")`, `r text_spec("change font size ", font_size = 16)` or `r text_spec("rotate", angle = 30)` your text. 
+
+An alias function `text_spec` is also provided for a more literal writing experience. The only difference is that in LaTeX, unless you specify `latex_background_in_cell = FALSE` (default is `TRUE`) in `cell_spec`, it will define cell background color as `\cellcolor{}`, which doesn't work outside of a table, while for `text_spec`, the default value for `latex_background_in_cell` is `FALSE`.
+
+```{r}
+sometext <- strsplit(paste0(
+  "You can even try do do some crazy things like this paragraph. Although ",
+  "it's probably a useless feature but you may find it's fun to play with. :)"
+), " ")[[1]]
+text_formatted <- paste(
+  text_spec(sometext, color = spec_color(1:length(sometext), end = 0.8, option = "A")),
+  collapse = " ")
+
+# To display the text, type `r text_formatted` outside of the chunk
+```
+`r text_formatted`
+
 # Grouped Columns / Rows
 ## Add header rows to group columns
 Tables with multi-row headers can be very useful to demonstrate grouped data. To do that, you can pipe your kable object into `add_header_above()`. The header variable is supposed to be a named character with the names as new column names and values as column span. For your convenience, if column span equals to 1, you can ignore the `=1` part so the function below can be written as `add_header_above(c(" ", "Group 1" = 2, "Group 2" = 2, "Group 3" = 2)).
@@ -207,7 +268,7 @@
   add_header_above(c(" " = 1, "Group 1" = 2, "Group 2" = 2, "Group 3" = 2))
 ```
 
-In fact, if you want to add another row of header on top, please feel free to do so. Also, in kableExtra 0.3.0, you can specify `bold` & `italic` as you do in `row_spec()`.
+In fact, if you want to add another row of header on top, please feel free to do so. Also, since kableExtra 0.3.0, you can specify `bold` & `italic` as you do in `row_spec()`.
 ```{r}
 kable(dt, format = "latex", booktabs = T) %>%
   kable_styling(latex_options = "striped") %>%
diff --git a/docs/awesome_table_in_pdf.pdf b/docs/awesome_table_in_pdf.pdf
index 666ff35..d84b4bc 100644
--- a/docs/awesome_table_in_pdf.pdf
+++ b/docs/awesome_table_in_pdf.pdf
Binary files differ
diff --git a/docs/use_kableExtra_with_formattable.Rmd b/docs/use_kableExtra_with_formattable.Rmd
index 1d71652..99f8c2f 100644
--- a/docs/use_kableExtra_with_formattable.Rmd
+++ b/docs/use_kableExtra_with_formattable.Rmd
@@ -48,7 +48,8 @@
   mutate_if(is.numeric, function(x){
     cell_spec(x, "html", color = spec_color(x), bold = T)
   }) %>%
-  kable("html", escape = F, align = "c") %>%
+  mutate(Species = cell_spec(Species, background = "red")) %>%
+  kable("html", col.names = c("A", "B", "C", "D", "DDDDDDDDDDD"), escape = F, align = "c") %>%
   kable_styling("condensed", full_width = F)
 ```
 
diff --git a/docs/use_kableExtra_with_formattable.html b/docs/use_kableExtra_with_formattable.html
index 1dff26c..4ea68ad 100644
--- a/docs/use_kableExtra_with_formattable.html
+++ b/docs/use_kableExtra_with_formattable.html
@@ -11,7 +11,7 @@
 
 <meta name="author" content="Hao Zhu" />
 
-<meta name="date" content="2017-10-17" />
+<meta name="date" content="2017-10-21" />
 
 <title>Use kableExtra with formattable</title>
 
@@ -119,7 +119,7 @@
 
 <h1 class="title toc-ignore">Use kableExtra with formattable</h1>
 <h4 class="author"><em>Hao Zhu</em></h4>
-<h4 class="date"><em>2017-10-17</em></h4>
+<h4 class="date"><em>2017-10-21</em></h4>
 
 </div>
 
@@ -188,14 +188,12 @@
 <span style="display: block; padding: 0 4px; border-radius: 4px; background-color: #ffcc6f">21.0</span>
 </td>
 <td style="text-align:left;">
-<div style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;text-align: center;-webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); -ms-transform: rotate(60deg); -o-transform: rotate(60deg); transform: rotate(60deg);">
-6
+<div style="-webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); -ms-transform: rotate(60deg); -o-transform: rotate(60deg); transform: rotate(60deg);">
+<span style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;text-align: center;">6</span>
 </div>
 </td>
 <td style="text-align:left;">
-<div style=" font-style: italic;color: green;">
-160
-</div>
+<span style=" font-style: italic;color: green;">160</span>
 </td>
 <td style="text-align:left;width: 3cm; display: inline-block; ">
 <span style="display: inline-block; direction: rtl; border-radius: 4px; padding-right: 2px; background-color: lightgreen; width: 62.86%">110</span>
@@ -209,14 +207,12 @@
 <span style="display: block; padding: 0 4px; border-radius: 4px; background-color: #ffcc6f">21.0</span>
 </td>
 <td style="text-align:left;">
-<div style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;text-align: center;-webkit-transform: rotate(120deg); -moz-transform: rotate(120deg); -ms-transform: rotate(120deg); -o-transform: rotate(120deg); transform: rotate(120deg);">
-6
+<div style="-webkit-transform: rotate(120deg); -moz-transform: rotate(120deg); -ms-transform: rotate(120deg); -o-transform: rotate(120deg); transform: rotate(120deg);">
+<span style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;text-align: center;">6</span>
 </div>
 </td>
 <td style="text-align:left;">
-<div style=" font-style: italic;color: green;">
-160
-</div>
+<span style=" font-style: italic;color: green;">160</span>
 </td>
 <td style="text-align:left;width: 3cm; display: inline-block; ">
 <span style="display: inline-block; direction: rtl; border-radius: 4px; padding-right: 2px; background-color: lightgreen; width: 62.86%">110</span>
@@ -230,14 +226,12 @@
 <span style="display: block; padding: 0 4px; border-radius: 4px; background-color: #ffa500">22.8</span>
 </td>
 <td style="text-align:left;">
-<div style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;text-align: center;-webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg);">
-4
+<div style="-webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg);">
+<span style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;text-align: center;">4</span>
 </div>
 </td>
 <td style="text-align:left;">
-<div style=" font-style: italic;color: green;">
-108
-</div>
+<span style=" font-style: italic;color: green;">108</span>
 </td>
 <td style="text-align:left;width: 3cm; display: inline-block; ">
 <span style="display: inline-block; direction: rtl; border-radius: 4px; padding-right: 2px; background-color: lightgreen; width: 53.14%">93</span>
@@ -251,14 +245,12 @@
 <span style="display: block; padding: 0 4px; border-radius: 4px; background-color: #ffc357">21.4</span>
 </td>
 <td style="text-align:left;">
-<div style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;text-align: center;-webkit-transform: rotate(240deg); -moz-transform: rotate(240deg); -ms-transform: rotate(240deg); -o-transform: rotate(240deg); transform: rotate(240deg);">
-6
+<div style="-webkit-transform: rotate(240deg); -moz-transform: rotate(240deg); -ms-transform: rotate(240deg); -o-transform: rotate(240deg); transform: rotate(240deg);">
+<span style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;text-align: center;">6</span>
 </div>
 </td>
 <td style="text-align:left;">
-<div style=" font-weight: bold;color: red;">
-258
-</div>
+<span style=" font-weight: bold;color: red;">258</span>
 </td>
 <td style="text-align:left;width: 3cm; display: inline-block; ">
 <span style="display: inline-block; direction: rtl; border-radius: 4px; padding-right: 2px; background-color: lightgreen; width: 62.86%">110</span>
@@ -272,14 +264,12 @@
 <span style="display: block; padding: 0 4px; border-radius: 4px; background-color: #ffffff">18.7</span>
 </td>
 <td style="text-align:left;">
-<div style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;text-align: center;-webkit-transform: rotate(300deg); -moz-transform: rotate(300deg); -ms-transform: rotate(300deg); -o-transform: rotate(300deg); transform: rotate(300deg);">
-8
+<div style="-webkit-transform: rotate(300deg); -moz-transform: rotate(300deg); -ms-transform: rotate(300deg); -o-transform: rotate(300deg); transform: rotate(300deg);">
+<span style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;text-align: center;">8</span>
 </div>
 </td>
 <td style="text-align:left;">
-<div style=" font-weight: bold;color: red;">
-360
-</div>
+<span style=" font-weight: bold;color: red;">360</span>
 </td>
 <td style="text-align:left;width: 3cm; display: inline-block; ">
 <span style="display: inline-block; direction: rtl; border-radius: 4px; padding-right: 2px; background-color: lightgreen; width: 100.00%">175</span>
@@ -296,277 +286,199 @@
   mutate_if(is.numeric, function(x){
     cell_spec(x, &quot;html&quot;, color = spec_color(x), bold = T)
   }) %&gt;%
-  kable(&quot;html&quot;, escape = F, align = &quot;c&quot;) %&gt;%
+  mutate(Species = cell_spec(Species, background = &quot;red&quot;)) %&gt;%
+  kable(&quot;html&quot;, col.names = c(&quot;A&quot;, &quot;B&quot;, &quot;C&quot;, &quot;D&quot;, &quot;DDDDDDDDDDD&quot;), escape = F, align = &quot;c&quot;) %&gt;%
   kable_styling(&quot;condensed&quot;, full_width = F)</code></pre>
+<pre><code>## Setting cell_spec format as html</code></pre>
 <table class="table table-condensed" style="width: auto !important; margin-left: auto; margin-right: auto;">
 <thead>
 <tr>
 <th style="text-align:center;">
-Sepal.Length
+A
 </th>
 <th style="text-align:center;">
-Sepal.Width
+B
 </th>
 <th style="text-align:center;">
-Petal.Length
+C
 </th>
 <th style="text-align:center;">
-Petal.Width
+D
 </th>
 <th style="text-align:center;">
-Species
+DDDDDDDDDDD
 </th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(66, 190, 113, 1);">
-5.1
-</div>
+<span style=" font-weight: bold;color: rgba(66, 190, 113, 1);">5.1</span>
 </td>
 <td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(34, 168, 132, 1);">
-3.5
-</div>
+<span style=" font-weight: bold;color: rgba(34, 168, 132, 1);">3.5</span>
 </td>
 <td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(59, 82, 139, 1);">
-1.4
-</div>
+<span style=" font-weight: bold;color: rgba(59, 82, 139, 1);">1.4</span>
 </td>
 <td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(49, 104, 142, 1);">
-0.2
-</div>
+<span style=" font-weight: bold;color: rgba(49, 104, 142, 1);">0.2</span>
 </td>
 <td style="text-align:center;">
-setosa
+<span style="border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;">setosa</span>
 </td>
 </tr>
 <tr>
 <td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(33, 144, 141, 1);">
-4.9
-</div>
+<span style=" font-weight: bold;color: rgba(33, 144, 141, 1);">4.9</span>
 </td>
 <td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(72, 37, 118, 1);">
-3
-</div>
+<span style=" font-weight: bold;color: rgba(72, 37, 118, 1);">3</span>
 </td>
 <td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(59, 82, 139, 1);">
-1.4
-</div>
+<span style=" font-weight: bold;color: rgba(59, 82, 139, 1);">1.4</span>
 </td>
 <td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(49, 104, 142, 1);">
-0.2
-</div>
+<span style=" font-weight: bold;color: rgba(49, 104, 142, 1);">0.2</span>
 </td>
 <td style="text-align:center;">
-setosa
+<span style="border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;">setosa</span>
 </td>
 </tr>
 <tr>
 <td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(53, 95, 141, 1);">
-4.7
-</div>
+<span style=" font-weight: bold;color: rgba(53, 95, 141, 1);">4.7</span>
 </td>
 <td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(52, 96, 141, 1);">
-3.2
-</div>
+<span style=" font-weight: bold;color: rgba(52, 96, 141, 1);">3.2</span>
 </td>
 <td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(68, 1, 84, 1);">
-1.3
-</div>
+<span style=" font-weight: bold;color: rgba(68, 1, 84, 1);">1.3</span>
 </td>
 <td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(49, 104, 142, 1);">
-0.2
-</div>
+<span style=" font-weight: bold;color: rgba(49, 104, 142, 1);">0.2</span>
 </td>
 <td style="text-align:center;">
-setosa
+<span style="border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;">setosa</span>
 </td>
 </tr>
 <tr>
 <td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(65, 68, 135, 1);">
-4.6
-</div>
+<span style=" font-weight: bold;color: rgba(65, 68, 135, 1);">4.6</span>
 </td>
 <td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(65, 68, 135, 1);">
-3.1
-</div>
+<span style=" font-weight: bold;color: rgba(65, 68, 135, 1);">3.1</span>
 </td>
 <td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(33, 144, 141, 1);">
-1.5
-</div>
+<span style=" font-weight: bold;color: rgba(33, 144, 141, 1);">1.5</span>
 </td>
 <td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(49, 104, 142, 1);">
-0.2
-</div>
+<span style=" font-weight: bold;color: rgba(49, 104, 142, 1);">0.2</span>
 </td>
 <td style="text-align:center;">
-setosa
+<span style="border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;">setosa</span>
 </td>
 </tr>
 <tr>
 <td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(34, 168, 132, 1);">
-5
-</div>
+<span style=" font-weight: bold;color: rgba(34, 168, 132, 1);">5</span>
 </td>
 <td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(68, 191, 112, 1);">
-3.6
-</div>
+<span style=" font-weight: bold;color: rgba(68, 191, 112, 1);">3.6</span>
 </td>
 <td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(59, 82, 139, 1);">
-1.4
-</div>
+<span style=" font-weight: bold;color: rgba(59, 82, 139, 1);">1.4</span>
 </td>
 <td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(49, 104, 142, 1);">
-0.2
-</div>
+<span style=" font-weight: bold;color: rgba(49, 104, 142, 1);">0.2</span>
 </td>
 <td style="text-align:center;">
-setosa
+<span style="border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;">setosa</span>
 </td>
 </tr>
 <tr>
 <td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(253, 231, 37, 1);">
-5.4
-</div>
+<span style=" font-weight: bold;color: rgba(253, 231, 37, 1);">5.4</span>
 </td>
 <td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(253, 231, 37, 1);">
-3.9
-</div>
+<span style=" font-weight: bold;color: rgba(253, 231, 37, 1);">3.9</span>
 </td>
 <td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(253, 231, 37, 1);">
-1.7
-</div>
+<span style=" font-weight: bold;color: rgba(253, 231, 37, 1);">1.7</span>
 </td>
 <td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(253, 231, 37, 1);">
-0.4
-</div>
+<span style=" font-weight: bold;color: rgba(253, 231, 37, 1);">0.4</span>
 </td>
 <td style="text-align:center;">
-setosa
+<span style="border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;">setosa</span>
 </td>
 </tr>
 <tr>
 <td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(65, 68, 135, 1);">
-4.6
-</div>
+<span style=" font-weight: bold;color: rgba(65, 68, 135, 1);">4.6</span>
 </td>
 <td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(33, 144, 141, 1);">
-3.4
-</div>
+<span style=" font-weight: bold;color: rgba(33, 144, 141, 1);">3.4</span>
 </td>
 <td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(59, 82, 139, 1);">
-1.4
-</div>
+<span style=" font-weight: bold;color: rgba(59, 82, 139, 1);">1.4</span>
 </td>
 <td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(53, 183, 121, 1);">
-0.3
-</div>
+<span style=" font-weight: bold;color: rgba(53, 183, 121, 1);">0.3</span>
 </td>
 <td style="text-align:center;">
-setosa
+<span style="border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;">setosa</span>
 </td>
 </tr>
 <tr>
 <td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(34, 168, 132, 1);">
-5
-</div>
+<span style=" font-weight: bold;color: rgba(34, 168, 132, 1);">5</span>
 </td>
 <td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(33, 144, 141, 1);">
-3.4
-</div>
+<span style=" font-weight: bold;color: rgba(33, 144, 141, 1);">3.4</span>
 </td>
 <td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(33, 144, 141, 1);">
-1.5
-</div>
+<span style=" font-weight: bold;color: rgba(33, 144, 141, 1);">1.5</span>
 </td>
 <td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(49, 104, 142, 1);">
-0.2
-</div>
+<span style=" font-weight: bold;color: rgba(49, 104, 142, 1);">0.2</span>
 </td>
 <td style="text-align:center;">
-setosa
+<span style="border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;">setosa</span>
 </td>
 </tr>
 <tr>
 <td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(68, 1, 84, 1);">
-4.4
-</div>
+<span style=" font-weight: bold;color: rgba(68, 1, 84, 1);">4.4</span>
 </td>
 <td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(68, 1, 84, 1);">
-2.9
-</div>
+<span style=" font-weight: bold;color: rgba(68, 1, 84, 1);">2.9</span>
 </td>
 <td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(59, 82, 139, 1);">
-1.4
-</div>
+<span style=" font-weight: bold;color: rgba(59, 82, 139, 1);">1.4</span>
 </td>
 <td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(49, 104, 142, 1);">
-0.2
-</div>
+<span style=" font-weight: bold;color: rgba(49, 104, 142, 1);">0.2</span>
 </td>
 <td style="text-align:center;">
-setosa
+<span style="border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;">setosa</span>
 </td>
 </tr>
 <tr>
 <td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(33, 144, 141, 1);">
-4.9
-</div>
+<span style=" font-weight: bold;color: rgba(33, 144, 141, 1);">4.9</span>
 </td>
 <td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(65, 68, 135, 1);">
-3.1
-</div>
+<span style=" font-weight: bold;color: rgba(65, 68, 135, 1);">3.1</span>
 </td>
 <td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(33, 144, 141, 1);">
-1.5
-</div>
+<span style=" font-weight: bold;color: rgba(33, 144, 141, 1);">1.5</span>
 </td>
 <td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(68, 1, 84, 1);">
-0.1
-</div>
+<span style=" font-weight: bold;color: rgba(68, 1, 84, 1);">0.1</span>
 </td>
 <td style="text-align:center;">
-setosa
+<span style="border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;">setosa</span>
 </td>
 </tr>
 </tbody>