Creating Tables Using R and Pure HTML

A problem with R is that its tables are not good enough to share with non-R users, both in terms of visual attractiveness and ease of reading – particularly when the table is large. Quite a few different packages, tools, and workflows have been developed to address this problem, from formattable through to R Markdown and Displayr, to name a few. Over the past few months I have found myself increasingly using R to write tables in pure HTML. Why? Because pure HTML gives the greatest level of control. In this post I am going to work through a simple but easily generalizable example, which can both be used within R and RStudio, as well as when building interactive dashboards.

My motivating problems

Problem 1: A heatmap with wrapping row and column labels

There are lots of great tools for creating heatmaps in R. But, the first challenge that was bringing me unstuck was creating a heatmap, where I needed to have really long row and column labels. I needed to create something like the table below. I will spend the rest of the this post describing how to do this.

Problem 2: Finely tuned styling

The second problem was helping a client who had a very particular set of formatting needs, relating to s, colors, lines, shading, and a border. I won’t write more about this example in this post, but you can copy all the code from the code box if you wish to explore it further.

Solving the problem with pure HTML

There is certainly no shortage of ways of creating either of these outputs in R. However, it turns into a situation where when all you have is a hammer, everything starts to look like a nail. The creation of tables like this is central to what HTML does, so doing something like this in HTML is trivial. I’ve shown the code below. It is a lot easier to digest than most R code! I’ve shown it as a picture to avoid any ugly browser wrapping and character replacement weirdness, but if you click here you can view the actual code.

How do you learn HTML? That’s the easy bit. If you Google anything like “create an HTML table” you will find lots of great examples, and most will even preview the code as you type, making it easy to try things. I wrote the code below using the W3 Schools site.

With the code below, there are two key sections. The top half of the code creates the styles (CSS) for the html. For example,  td.cell12 {background-color: #DFEBF7; color: blue;},  creates a style called Cell12, which has a light blue background color and a blue . Then, the bottom half creates the actual table. For example, <td class = "border cell12">2</td> creates a cell in the table with a number of 2 in it, and formats the style using the styles of border and cell12.

Viewing HTML tables from within R, RStudio, and in dashboards

Once you have your HTML, it is straightforward to view it in R (via your web browser), R Studio, or any dashboarding solution that supports HMTL widgets. This is done using the Displayr/rhtmlMetro package, which needs to be installed from github. Where your HTML is a string called your.html, you use:

 
rhtmlMetro::Box(text = your.html, text.as.html = TRUE)

Using R to write the HTML

Of course, the magic comes when you use R to write the HTML. The HTML above has a pretty clear structure, which means that we can write it using some R code. We start with a basic principle of writing software, which is separating our data from our presentation. In this case, the data is a natural fit as a an R matrix:

The following function then writes the HTML above, but generalizes it so it will work for any sized matrix:

Then, we can create the heatmap by passing my.data as an argument to MyHeatmap.

And, because we have written a function, we can easily reapply it to other data sets.

I’ve created all these examples in a live Displayr document. Click here to go into Displayr, where you can inspect and play with the code.