How to produce HTML tables and accompanying CSS using R Markdown or HTML Sweave?

Question

I previously asked a question about how to export a HTML table in R and have control over line borders.

I'm used to LaTeX where when you create a table, the formatting of the table is largely determined by the text and markup that appears at that point. This works well for Sweave, because your R code chunk can output LaTeX table markup at that point. I also understand that there are tools like xtable that can produce HTML markup for a table.

However, control over HTML tables seems to rely on style sheets, which are meant to appear in the header of the document and not in the location where the R code chunk is placed. Of course, I could just put content in the style sheet, but in scientific applications often there can be some quite specific table formatting that varies in some respects from table to table.

Thus, my question:

• In general, how do you format an HTML table with literate programming like R Markdown or even from raw HTML if formatting of the output requires output to be created in a separate place in the document (i.e., CSS for the table in the header) to where the R code chunk is placed (i.e.,the table itself in the body)?

Answer 1

I can think of three ways without messing with your toolchain, all of them are kind of hacky.

1. Just output the <style> right in the body. This isn't technically valid, but it will work fine in any major browser.

2. Emit JavaScript that creates a <style> block at runtime and appends it to the head (here's one way). This will look a little gross in the HTML source and in the R code, but it will work and it will validate.

3. Use a scoped style block. This would be exactly what you are looking for, except that the scope attribute is new to HTML5 and not yet implemented in any major browser. However, if you base your styles on uniquely generated IDs (i.e. your rules are written such that even if they apply to the whole document they won't mess anything up), I imagine the browsers will just ignore the "scoped" attribute and everything will work properly--then this becomes effectively a version of option 1 that happens to validate!

(I would go with #3, personally.)

If you haven't already, it'd be worth starting a thread at the RStudio support forum about this; even though it's not strictly an RStudio issue, we're obviously doing a lot of work on the end-to-end scenario of publishing reports in R Markdown and would love to find out more about your specific examples. Tables are clearly going to be a big part of what people do with this reports and we know this is a weak spot right now, one that we do want to address in future versions.

Answer 2

An alternative method would be to use pander as R markdown backend (sorry for this marketing-like answer, but I do think my Pandoc.brew function could be really handy for this purpose).

It is similar to knitr (parsing/evaling R commands in a markdown formatted file) but using brew syntax for R code blocks (e.g. <%...%> for general R code - like loops etc. and <%=...%> for returning results in a block). But differs from brew as Pandoc.brew does not only cat results in a code block, but runs my pander generic method which transforms (quite q wide variety of) R objects to (IMHO) pretty Pandoc's markdown format.

So running Pandoc.brew on a markdown formatted file would result in a clean markdown file with all R code blocks run - and you do not have to deal with xtable and other tweaks (not even with plots as all R code blocks resulting in an image is rendered to a png file and linked in the markdown text file).

And about why I started to answer here: with pander you can pass special options to pandoc, e.g. adding a custom CSS stylesheet (or JS etc.) to your generated HTML's header, see details on Pandoc's homepage. Based on that you could easily add your CSS file(s) or even just a bunch of style parameter. This could be done in pander with Pandoc.convert's option. BTW you do not even have to use my forked brew function, you can generate your markdown file with e.g. knitr and call Pandoc with the above function.

pander adds some CSS/JS to generated HTML files, which would generate (IMHO) quite pretty output, but you can easily customize that and adding your own files there.

For example: you would get this HTML file based this markdown by default which was Pandoc.brewed from this quite short markdown syntax brew file. BTW my github page was also generated/automatically styled by my markdown parser. I would really appreciate if you would try it :)

---

NOTE: to try the above calls you would need Pandoc pre-installed, also you'd need an up-to-date version of both rapport, both pander. See installation details.

Answer 3

One option which doesn't completely solve the problem is to use gvisTable:

Here is a basic gvisTable:

```{r message=FALSE}
# install.packages("googleVis")
library(googleVis)
library(MASS)
data(Animals)
```

```{r results='asis'}
tab1 <- gvisTable(Animals, 
                   options = list(width = 600, height = 650, 
                                  page = "enable",
                                  pageSize = nrow(Animals)))
print(tab1, "chart")
```

• ?print.gvis explains some of the options for printing the gvis object.
• In partiuclar the tag="chart" option is required for R Markdown documents as this means that the output is just what is required for the object, rather than a complete HTML page as is the default.
• See the output of this and a little more here

Answer 4

Ok, hope I got it now. You should set some additional knitr options, and you could cat() the css dynamically if you like.

<!DOCTYPE html>
<head>
<style type="text/css">
.greenback {
  background-color: teal;
    color: white;
}
.greenback td {
  border: dotted gray;
}
.bluescreen {
    background-color: blue;
    color: white;
}
.bluescreen td {
  border: thick solid;
  padding:2px;
  margin:2px;
}

</style>
</head>

<body>
<table class="greenback">
<tr><td>Hello</td><td>Mars</td><tr>
<tr><td>World</td><td>Moon</td><tr>
</table>

Could use some xtable code here instead.

<!--begin.rcode
cat('
<table class="bluescreen">
<tr><td>Hello</td><td>Mars</td><tr>
<tr><td>World</td><td>Moon</td><tr>
</table>
')
    end.rcode-->

</body>
</html>

Answer 5

Neil Saunders has a tutorial on customising CSS for HTML generated using RStudio. It shows how you can modify the built in style file and source this alternative file.