<p><div><div><div><div data-show-faces="false" data-height="21" data-width="100" data-layout="button_count" data-send="true" data-href="https://www.r-bloggers.com/creating-tables-using-r-and-pure-html/"></div></div><div></div></div><div></div></div>
<div>
(This article was first published on <strong><a href="https://www.displayr.com/pure-html/?utm_medium=Feed&utm_source=Syndication"> R-Bloggers – Displayr</a></strong>, and kindly contributed to <a rel="nofollow" href="https://www.r-bloggers.com/">R-bloggers)</a> </div>
<p>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 <span>formattable</span> 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.</p>
<h2>My motivating problems</h2>
<h2>Problem 1: A heatmap with wrapping row and column labels</h2>
<p>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.</p>
<p><img sizes="(max-width: 557px) 100vw, 557px" src="https://i1.wp.com/www.displayr.com/wp-content/uploads/2018/11/HeatmapHTML.png?w=450&ssl=1" alt="" class="wp-image-13305" data-recalc-dims="1"></p>
<h2>Problem 2: Finely tuned styling</h2>
<p>The second problem was helping a client who had a very particular set of formatting needs, relating to fonts, font 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.</p>
<p><iframe width="450" src="https://embedded.azureedge.net/75668/312088/f7154064-ced3-4d53-b99c-a12655b54bcb.html?v=32756-1d5913149d1407175134"></iframe>
</p>
<h2>Solving the problem with pure HTML</h2>
<p>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 <a rel="nofollow" href="https://app.displayr.com/Try/Pure%20HTML" target="_blank">click here</a> you can view the actual code.</p>
<p>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 <a rel="nofollow" href="https://www.w3schools.com/html/html_tables.asp" target="_blank">W3 Schools site</a>.</p>
<p>With the code below, there are two key sections. The top half of the code creates the styles (CSS) for the html. For example,  <span><tt>td.cell12 {background-color: #DFEBF7; color: blue;}</tt></span>,  creates a style called <span><tt>Cell12</tt></span>, which has a light blue background color and a blue font. Then, the bottom half creates the actual table. For example,<tt> <span><td>2</td></span></tt> creates a cell in the table with a number of<span> 2</span> in it, and formats the style using the styles of <tt>border</tt> and <tt><span>cell12</span>.</tt></p>
<p><img sizes="(max-width: 1024px) 100vw, 1024px" src="https://i2.wp.com/www.displayr.com/wp-content/uploads/2018/11/htmltable-1024x683.png?w=450&ssl=1" alt="" class="wp-image-13306" data-recalc-dims="1"></p>
<h2>Viewing HTML tables from within R, RStudio, and in dashboards</h2>
<p>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 <a rel="nofollow" href="https://github.com/Displayr/rhtmlMetro" target="_blank">Displayr/rhtmlMetro</a> package, which <a rel="nofollow" href="https://www.displayr.com/installing-r-packages-from-github/" target="_blank">needs to be installed from github</a>. Where your HTML is a string called <span>your.html</span>, you use:</p>
<pre> 
rhtmlMetro::Box(text = your.html, text.as.html = TRUE)
</pre>
<h2>Using R to write the HTML</h2>
<p>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:</p>
<p><iframe width="450" src="https://embedded.azureedge.net/75668/310100/471c5b7f-ec57-4a94-b56b-8490d8ad6607.html?v=32756-1d5913149d979906012"><span data-mce-type="bookmark">﻿</span></iframe>
</p>
<p>The following function then writes the HTML above, but generalizes it so it will work for any sized matrix:</p>
<p><iframe width="450" src="https://embedded.azureedge.net/75668/310100/7d7d3f5e-b122-4cdf-8555-042423806810.html?v=32756-1d5913149d-1042679492"></iframe>
</p>
<p>Then, we can create the heatmap by passing <span>my.data</span> as an argument to <span>MyHeatmap</span>.</p>
<p><iframe width="450" src="https://embedded.azureedge.net/75668/310100/ef08e594-bae9-43df-a32d-d3ee327fe197.html?v=32756-1d5913149d-795609362"></iframe>
</p>
<p>And, because we have written a function, we can easily reapply it to other data sets.</p>
<p><iframe width="450" src="https://embedded.azureedge.net/75668/310100/c87416cd-ac21-48cc-b632-bb456053b127.html?v=32756-1d5913149d870680138"></iframe>
</p>
<p> </p>
<p>I’ve created all these examples in a live Displayr document. <a rel="nofollow" href="https://app.displayr.com/Try/Pure%20HTML" target="_blank">Click here</a> to go into Displayr, where you can inspect and play with the code.</p>
<p> </p>
	<p>
<div>
<div>To <strong>leave a comment</strong> for the author, please follow the link and comment on their blog: <strong><a href="https://www.displayr.com/pure-html/?utm_medium=Feed&utm_source=Syndication"> R-Bloggers – Displayr</a></strong>.</div>
<hr>
<a rel="nofollow" href="https://www.r-bloggers.com/">R-bloggers.com</a> offers <strong><a rel="nofollow" href="https://feedburner.google.com/fb/a/mailverify?uri=RBloggers">daily e-mail updates</a></strong> about <a rel="nofollow" href="https://www.r-project.org/" title="The R Project for Statistical Computing">R</a> news and <a rel="nofollow" href="https://www.r-bloggers.com/search/tutorial" title="R tutorials">tutorials</a> on topics such as: <a rel="nofollow" href="https://www.r-bloggers.com/search/data%20science" title="Data science">Data science</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/Big%20Data" title="Big Data">Big Data, <a rel="nofollow" href="https://www.r-users.com/" title="R jobs">R jobs</a>, visualization (<a rel="nofollow" href="https://www.r-bloggers.com/search/ggplot2" title="ggplot and ggplot2 tutorials">ggplot2</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/boxplot" title="Boxplots using lattice and ggplot2 tutorials">Boxplots</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/map" title="Maps and gis">maps</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/animation" title="Animation in R">animation</a>), programming (<a rel="nofollow" href="https://www.r-bloggers.com/search/RStudio" title="RStudio IDE for R">RStudio</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/sweave" title="Sweave and literate programming">Sweave</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/LaTeX" title="LaTeX in R">LaTeX</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/SQL" title="SQL and databases">SQL</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/eclipse" title="Eclipse IDE for R">Eclipse</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/git" title="git and github, Version Control System">git</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/hadoop" title="Large data in R using Hadoop">hadoop</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/Web+Scraping" title="Web Scraping of google, facebook, yahoo, twitter and more using R">Web Scraping</a>) statistics (<a rel="nofollow" href="https://www.r-bloggers.com/search/regression" title="Regressions and ANOVA analysis tutorials">regression</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/PCA" title="principal component analysis tutorial">PCA</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/time+series" title="Time series">time series</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/trading" title="finance trading">trading</a>) and more...
<img width="1" alt="" src="http://feeds.feedburner.com/~r/RBloggers/~4/d_fnULLxOxY" height="1"></a></div>