6

I would like to work out how to generate formatted HTML tables in a way that does not require use of styles that are placed in the HTML header. I've broadly asked about this question already, but received one answer that mentioned using the header and another answer that involves using pandoc (Update: see bottom of this post regarding new answer posted since asking this question. I'd like to have an R function that writes all the HTML formatting required for a formatted HTML table in one place.

I've recently been playing around with gvisTable and it is capable of writing all relevant information in one place:

The following code

```{r results='asis'}
simpleData <- data.frame(matrix(1:9, nrow=3))
tab2 <- gvisTable(simpleData, 
                   options=list(width = 600, height = 300))
print(tab2, "chart")
```

will output the following into an R Markdown document:

<!-- jsHeader -->
<script type="text/javascript" src="http://www.google.com/jsapi">
</script>
<script type="text/javascript">

// jsData 
function gvisDataTableID273f3d05cccd ()
{
  var data = new google.visualization.DataTable();
  var datajson =
[
 [
 1,
4,
7 
],
[
 2,
5,
8 
],
[
 3,
6,
9 
] 
];
data.addColumn('number','X1');
data.addColumn('number','X2');
data.addColumn('number','X3');
data.addRows(datajson);
return(data);
}

// jsDrawChart
function drawChartTableID273f3d05cccd() {
  var data = gvisDataTableID273f3d05cccd();
  var options = {};
options["allowHtml"] = true;
options["width"] =    600;
options["height"] =    300;

     var chart = new google.visualization.Table(
       document.getElementById('TableID273f3d05cccd')
     );
     chart.draw(data,options);


}


// jsDisplayChart 
function displayChartTableID273f3d05cccd()
{
  google.load("visualization", "1", { packages:["table"] }); 
  google.setOnLoadCallback(drawChartTableID273f3d05cccd);
}

// jsChart 
displayChartTableID273f3d05cccd()

<!-- jsFooter -->  
//-->
</script>

<!-- divChart -->

<div id="TableID273f3d05cccd"
  style="width: 600px; height: 300px;">
</div>

And when this is placed in context, a gvisTable is produced. See the second table in this output.

Thus, a simple R function has outputted all the necessary HTML for the creation of a fairly sophisticated table. Ultimately I'd like to have the same degree of table formatting control seen in LateX, only for R Markdown. And it would be good that given such posts often appear on blogs, through syndication, in RSS readers, and so on that the formatting commands were in the body.

Questions

  • Is it possible to use an approach similar to gvis (e.g., scripts in the HTML body) to format HTML tables (e.g., lines, cell formatting, cell height and width, fonts, etc.)?
  • Are there any existing R functions that support the production of such tables?
  • Do the assumptions of this question make sense, or is there some other way to achieve my broader aims of precise HTML table formatting with R Markdown?

Update

Joe has added an answer to my previous question where he mentions three options (style in body; javascript which embeds style in header; and scoped style blocks). So I guess the main question that remains is whether there are any interfaces exist to faciliate using such approaches with R Markdown code blocks.

Community
  • 1
  • 1
Jeromy Anglim
  • 33,939
  • 30
  • 115
  • 173
  • You also received an answer saying you can just put the CSS in a style block right next to the table. I was in the middle of writing exactly that answer when I spotted it had already been answered there. What's wrong with that solution to your Q1? – Spacedman Jun 05 '12 at 09:26
  • Sorry; that answer was added after I asked this question. I've updated my question to focus more on R implementation. – Jeromy Anglim Jun 05 '12 at 10:53
  • markdown should just pass HTML through. So just stick a style block in before the markdown that generates the table (see package:xtable for that) – Spacedman Jun 05 '12 at 12:35

1 Answers1

3

From the RStudio Docs, you can set knitr to use a custom stylesheet using:

# Set Custom CSS
options(rstudio.markdownToHTML=
  function(inputFile, outputFile) {      
    require(markdown)
    markdownToHTML(inputFile, outputFile, stylesheet='custom.css')   
  }
)

Just replace stylesheet='custom.css' with the file path to your stylesheet.

Then, you can combine xtable and printwith the option type="html" in a chunk and you'll get a well-formatted table.

xtable also produces LaTeX if that's desirable.

JBecker
  • 804
  • 6
  • 9