HTML table formatting using gmalr

General
,
1

Hi all,
I'm trying to use gmailr to send an html email from a gmail account. I'd like the body to have text and a table. I am able to send the email and see the text/table, but my table is losing all formatting. Does anyone know how to preserve it?

t <- knitr::kable(mtcars, format = "html") %>% 
  kableExtra::kable_styling(bootstrap_options = c("striped", "hover", "condensed", "responsive")) %>%
  kableExtra::scroll_box(width = "100%", height = "200px")
t


mime() %>%
  to(to_address) %>%
  from("me") %>% 
  subject("testing html table") %>%
  html_body(t) %>%
  send_message()

Printed in the Rstudio Viewer, and below, what I receive in the email:

11%20PM
11%20PM947×413 49.6 KB

Is this an issue that I should take up with gmailr? Or am I doing something wrong with the body?

Here's what the contents of the body look like (taken from just the first 2 rows of mtcars):

<div style="border: 1px solid #ddd; padding: 5px; overflow-y: scroll; height:200px; overflow-x: scroll; width:100%; "><table class="table table-striped table-hover table-condensed table-responsive" style="margin-left: auto; margin-right: auto;">
 <thead>
  <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>
   <th style="text-align:right;"> qsec </th>
   <th style="text-align:right;"> vs </th>
   <th style="text-align:right;"> am </th>
   <th style="text-align:right;"> gear </th>
   <th style="text-align:right;"> carb </th>
  </tr>
 </thead>
<tbody>
  <tr>
   <td style="text-align:left;"> Mazda RX4 </td>
   <td style="text-align:right;"> 21 </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.9 </td>
   <td style="text-align:right;"> 2.620 </td>
   <td style="text-align:right;"> 16.46 </td>
   <td style="text-align:right;"> 0 </td>
   <td style="text-align:right;"> 1 </td>
   <td style="text-align:right;"> 4 </td>
   <td style="text-align:right;"> 4 </td>
  </tr>
  <tr>
   <td style="text-align:left;"> Mazda RX4 Wag </td>
   <td style="text-align:right;"> 21 </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.9 </td>
   <td style="text-align:right;"> 2.875 </td>
   <td style="text-align:right;"> 17.02 </td>
   <td style="text-align:right;"> 0 </td>
   <td style="text-align:right;"> 1 </td>
   <td style="text-align:right;"> 4 </td>
   <td style="text-align:right;"> 4 </td>
  </tr>
</tbody>
</table></div>
2

It looks as though the css associated with the table classes is not shipped in the email (this would be table, table-striped, table-hover, etc.). There's probably a way embed the kable css in the table output (maybe inline styling), but it could get messy. Alternatively, you define your own styles by taking the kable output and putting it up a html "document". Here's an example

  1. Generate html table
# get html output
table <- knitr::kable(iris, "html")
  1. we will define the css.
# css
css <- '<style type="text/css">
		table {
border-spacing: 0;
cursor: default;
}
table tr * {
padding: 7px;
}

table > thead > tr > th {
border-bottom: 3px solid #525252;
text-transform: lowercase;
}

table > thead > tr > th {
font-size: 14pt;
font-weight: 400;
font-family: "Helvetica", sans-serif;
}

table > tbody > tr:nth-child(odd) {
background-color: #f1f1f1;
}

table > tbody > tr > * {
font-family: "Lucida Console";
font-size: 11pt;
}

table > tbody > tr:hover {
background-color: #FFD670
}
</style>'
  1. format as an html document
# paste as html document
email <- paste0("<!DOCTYPE html><html><head>", 
                css,
                "</head><body><div>",
                "<h1>Check out this table!</h1>",
                table,
                "</div></body></html>")
  1. assemble the draft and send the email.
# build draft
html_msg <- mime() %>%
    to("...your email here...") %>%
    from("...your email here...") %>%
    html_body(email)

# send
html_msg %>%
    subject("Example Table") %>%
    send_message()

This generates the following output.

08%20AM
08%20AM1102×580 31.9 KB

Hope that helps! There's probably a better way to incorporate the kable output formatting, but this might give you an idea on how to structure the content.

1 Like