HtmlTable
An R package for generating advanced tables
Install / Use
/learn @gforge/HtmlTableREADME
Basics
The htmlTable package is intended for generating tables using HTML formatting. This format is compatible with Markdown when used for HTML-output. The most basic table can easily be created by just passing a matrix or a data.frame to the htmlTable-function:
library(magrittr)
library(htmlTable)
# A simple output
output <- matrix(1:4,
ncol=2,
dimnames = list(list("Row 1", "Row 2"),
list("Column 1", "Column 2")))
htmlTable(output)
<table class='gmisc_table' style='border-collapse: collapse;' id='table_4'>
<thead>
<tr>
<th style='border-bottom: 1px solid grey; border-top: 2px solid grey;'> </th>
<th style='border-bottom: 1px solid grey; border-top: 2px solid grey; text-align: center;'>Column 1</th>
<th style='border-bottom: 1px solid grey; border-top: 2px solid grey; text-align: center;'>Column 2</th>
</tr>
</thead><tbody>
<tr>
<td style='text-align: left;'>Row 1</td>
<td style='text-align: center;'>1</td>
<td style='text-align: center;'>3</td>
</tr>
<tr>
<td style='border-bottom: 2px solid grey; text-align: left;'>Row 2</td>
<td style='border-bottom: 2px solid grey; text-align: center;'>2</td>
<td style='border-bottom: 2px solid grey; text-align: center;'>4</td>
</tr>
</tbody>
</table>
If you are using dplyr and tidyverse a convenient wrapper is the tidyHtmlTable function (check out vignette("tidyHtmlTable")). A simple example of the tidyHtmlTable would look something like this:
library(tidyverse)
library(glue)
mtcars |>
as_tibble(rownames = "rnames") |>
filter(cyl == 6 & qsec < 18) |>
pivot_longer(names_to = "per_metric",
cols = c(hp, mpg, qsec)) |>
arrange(gear, rnames) |>
mutate(gear = glue("{gear} gears")) |>
addHtmlTableStyle(align = "r") |>
tidyHtmlTable(header = per_metric, rnames = rnames, rgroup = gear,
caption = "A simple <code>tidyHtmlTable</code> example using <code>mtcars</code>")
<table class='gmisc_table' style='border-collapse: collapse; margin-top: 1em; margin-bottom: 1em;' >
<thead>
<tr><td colspan='4' style='text-align: left;'>
A simple <code>tidyHtmlTable</code> example using <code>mtcars</code>
</td></tr>
<tr>
<th style='border-bottom: 1px solid grey; border-top: 2px solid grey;'> </th>
<th style='font-weight: 900; border-bottom: 1px solid grey; border-top: 2px solid grey; text-align: right;'>hp</th>
<th style='font-weight: 900; border-bottom: 1px solid grey; border-top: 2px solid grey; text-align: right;'>mpg</th>
<th style='font-weight: 900; border-bottom: 1px solid grey; border-top: 2px solid grey; text-align: right;'>qsec</th>
</tr>
</thead>
<tbody>
<tr><td colspan='4' style='font-weight: 900;'>4 gears</td></tr>
<tr>
<td style='text-align: left;'> Mazda RX4</td>
<td style='text-align: right;'>110</td>
<td style='text-align: right;'>21</td>
<td style='text-align: right;'>16.46</td>
</tr>
<tr>
<td style='text-align: left;'> Mazda RX4 Wag</td>
<td style='text-align: right;'>110</td>
<td style='text-align: right;'>21</td>
<td style='text-align: right;'>17.02</td>
</tr>
<tr><td colspan='4' style='font-weight: 900;'>5 gears</td></tr>
<tr>
<td style='border-bottom: 2px solid grey; text-align: left;'> Ferrari Dino</td>
<td style='border-bottom: 2px solid grey; text-align: right;'>175</td>
<td style='border-bottom: 2px solid grey; text-align: right;'>19.7</td>
<td style='border-bottom: 2px solid grey; text-align: right;'>15.5</td>
</tr>
</tbody>
</table>
Advanced
While it may be sufficient for basic tables a more advanced layout is often needed in medical publications with elements such as:
- row groups
- column spanners
- table spanners
- caption
- table footer
- zebra coloring (also know as banding):
- rows
- columns
As many journals require that a MS Word-document is submitted it is furthermore also important that the table imports correctly to a word processor, i.e. that the table doesn't only look nice in a web browser but also in the final document. The htmlTable-function is written for all these purposes.
Note: Due to GitHub CSS-styles the rows get automatically zebra-striped (in a bad way), borders get overridden and I haven't been able to figure out how to change this. See the vignette for a correct example: vignette("general", package = "htmlTable")
For demonstration purposes we will setup a basic matrix:
mx <-
matrix(ncol=6, nrow=8) |>
set_rownames(paste(c("1st", "2nd", "3rd",
paste0(4:8, "th")),
"row")) |>
set_colnames(paste(c("1st", "2nd", "3rd",
paste0(4:6, "th")),
"hdr"))
for (nr in 1:nrow(mx)){
for (nc in 1:ncol(mx)){
mx[nr, nc] <-
paste0(nr, ":", nc)
}
}
Row groups
The purpose of the row groups is to group variables that belong to the same group, e.g. a factored variable with more than two levels often benefit from grouping variables together.
htmlTable(mx,
rgroup = paste("Group", LETTERS[1:3]),
n.rgroup = c(2,4,nrow(mx) - 6))
<table class='gmisc_table' style='border-collapse: collapse;' id='table_4'>
<thead>
<tr>
<th style='border-bottom: 1px solid grey; border-top: 2px solid grey;'> </th>
<th style='border-bottom: 1px solid grey; border-top: 2px solid grey; text-align: center;'>1st hdr</th>
<th style='border-bottom: 1px solid grey; border-top: 2px solid grey; text-align: center;'>2nd hdr</th>
<th style='border-bottom: 1px solid grey; border-top: 2px solid grey; text-align: center;'>3rd hdr</th>
<th style='border-bottom: 1px solid grey; border-top: 2px solid grey; text-align: center;'>4th hdr</th>
<th style='border-bottom: 1px solid grey; border-top: 2px solid grey; text-align: center;'>5th hdr</th>
<th style='border-bottom: 1px solid grey; border-top: 2px solid grey; text-align: center;'>6th hdr</th>
</tr>
</thead><tbody>
<tr><td colspan='7' style='font-weight: 900;'>Group A</td></tr>
<tr>
<td style='text-align: left;'> 1st row</td>
<td style='text-align: center;'>1:1</td>
<td style='text-align: center;'>1:2</td>
<td style='text-align: center;'>1:3</td>
<td style='text-align: center;'>1:4</td>
<td style='text-align: center;'>1:5</td>
<td style='text-align: center;'>1:6</td>
</tr>
<tr>
<td style='text-align: left;'> 2nd row</td>
<td style='text-align: center;'>2:1</td>
<td style='text-align: center;'>2:2</td>
<td style='text-align: center;'>2:3</td>
<td style='text-align: center;'>2:4</td>
<td style='text-align: center;'>2:5</td>
<td style='text-align: center;'>2:6</td>
</tr>
<tr><td colspan='7' style='font-weight: 900;'>Group B</td></tr>
<tr>
<td style='text-align: left;'> 3rd row</td>
<td style='text-align: center;'>3:1</td>
<td style='text-align: center;'>3:2</td>
<td style='text-align: center;'>3:3</td>
<td style='text-align: center;'>3:4</td>
<td style='text-align: center;'>3:5</td>
<td style='text-align: center;'>3:6</td>
</tr>
<tr>
<td style='text-align: left;'> 4th row</td>
<td style='text-align: center;'>4:1</td>
<td style='text-align: center;'>4:2</td>
<td style='text-align: center;'>4:3</td>
<td style='text-align: center;'>4:4</td>
<td style='text-align: center;'>4:5</td>
<td style='text-align: center;'>4:6</td>
</tr>
<tr>
<td style='text-align: left;'> 5th row</td>
<td style='text-align: center;'>5:1</td>
<td style='text-align: center;'>5:2</td>
<td style='text-align: center;'>5:3</td>
<td style='text-align: center;'>5:4</td>
<td style='text-align: center;'>5:5</td>
<td style='text-align: center;'>5:6</td>
</tr>
<tr>
<td style='text-align: left;'> 6th row</td>
<td style='text-align: center;'>6:1</td>
<td style='text-align: center;'>6:2</td>
<td style='text-align: center;'>6:3</td>
<td style='text-align: center;'>6:4</td>
<td style='text-align: center;'>6:5</td>
<td style='text-align: center;'>6:6</td>
</tr>
<tr><td colspan='7' style='font-weight: 900;'>Group C</td></tr>
<tr>
<td style='text-align: left;'> 7th row</td>
<td style='text-align: center;'>7:1</td>
<td style='text-align: center;'>7:2</td>
<td style='text-align: center;'>7:3</td>
<td style='text-align: center;'>7:4</td>
<td style='text-align: center;'>7:5</td>
<td style='text-align: center;'>7:6</td>
</tr>
<tr>
<td style='border-bottom: 2px solid grey; text-align: left;'> 8th row</td>
<td style='border-bottom: 2px solid grey; text-align: center;'>8:1</td>
<td style='border-bottom: 2px solid grey; text-align: center;'>8:2</td>
<td style='border-bottom: 2px solid grey; text-align: center;'>8:3</td>
<td style='border-bottom: 2px solid grey; text-align: center;'>8:4</td>
<td style='border-bottom: 2px solid grey; text-align: center;'>8:5</td>
<td style='border-bottom: 2px solid grey; text-align: center;'>8:6</td>
</tr>
</tbody>
</table>
We can easily mix row groups with regular variables by having an empty row group name "":
htmlTable(mx,
rgroup = c(paste("Group", LETTERS[1:2]), ""),
n.rgroup = c(2,4,nrow(mx) - 6))
<table class='gmisc_table' style='border-collapse: collapse;' id='table_4'>
<thead>
<tr>
<th style='border-bottom: 1px solid grey; border-top: 2px solid grey;'> </th>
<th style='border-bottom: 1px solid grey; border-top: 2px solid grey; text-align: center;'>1st hdr</th>
<th style='border-bottom: 1px solid grey; border-top: 2px solid grey; text-align: center;'>2nd hdr</th>
<th style='border-bottom: 1px solid grey; border-top: 2px solid grey; text-align: center;'>3rd hdr</th>
<th style='border-bottom: 1pRelated Skills
node-connect
341.8kDiagnose OpenClaw node connection and pairing failures for Android, iOS, and macOS companion apps
frontend-design
84.6kCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
openai-whisper-api
341.8kTranscribe audio via OpenAI Audio Transcriptions API (Whisper).
commit-push-pr
84.6kCommit, push, and open a PR
