CODEWITHSUNDEEP
htmlcssr
user10745594
user10745594

Reputation:

Formatting Html Tables in R - Using Css

I am using the package "htmlTable" in R and trying to format a table. Specifically, I want to delete the uppermost border and change the remaining borders to black. Please run the code below to get the table that I am looking at.

Any help would be appreciated!

devtools::install_github('SwedishPensionsAgency/format.tables')
library(htmlTable)

Code <- ("AB", "BC", "MB", "NB")
Numbers <- c(148137, 186955, 37755, 17376)
DataFrame <- data.frame(Code, Numbers, stringsAsFactors = FALSE)


htmlTable(DataFrame, align = "c",
      rnames = FALSE,
      caption = "<b> <center> <font face = Times New Roman> Table 1. Test  <br> <br>",
      tfoot = "<b> Source </b> <br> [1]  Test Source",
      header = paste(c(" Territory", "Number of People")),
      css.caption = "color:red;",
      col.rgroup = c("none", "#ADADAD"),
      padding.tspanner = "", ctable = TRUE,
      css.table = "width:150%;border: none")

Upvotes: 0

Views: 1405

Answers (2)

trosendal
trosendal

Reputation: 1234

In my opinion, the methods you are using to generate the <html> is limiting your options for formatting. Below is my suggestion to how you should do this if you want absolute control of the styling. It also allows you to use resources like w3schools to fix perfect formatting:

Your data:

Code <- c("AB", "BC", "MB", "NB")
Numbers <- c(148137, 186955, 37755, 17376)
DataFrame <- data.frame(Code, Numbers, stringsAsFactors = FALSE)
names(DataFrame) <- c("Territory", "Number of People")

I use this library to produce <html> tables. Not as few lines of code as yours but no lack of flexibility. Here I install using the remotes package:

remotes::install_github('trosendal/hlt')
library(hlt)

Basic table structure and add style:

my_table <- hlt::html_table(DataFrame)
hlt::tag_attr(my_table) <- list(id = "table1", class = "gmisc_table")

A blurb before and after your table:

a <- html_p("Table 1. Test")
b <- html_p("<b>Source</b><br>[1] Test Source")

Put the table in a <div> as you had:

my_table <- hlt::html_div(a +
                          my_table +
                          b)
hlt::tag_attr(my_table) <- list(style = "margin: 0 auto; display: table; margin-top: 1em;")

Add the style (same as yours, plus your suggested changes)

head <- hlt::html_head(hlt::html_meta(charset="utf-8") +
                       hlt::html_meta("http-equiv" = "Content-type") +
                       hlt::html_meta("content" = "text/html") +
                       hlt::html_style(c(".gmisc_table {",
                                         "    width:150%;",
                                         "    border:1px solid black;",
                                         "    border-collapse:collapse",
                                         "}",
                                         ".gmisc_table th {",
                                         "    border-bottom: 2px solid grey;",
                                         "    border-left: 1px solid black;",
                                         "    text-align: center;",
                                         "}",
                                         ".gmisc_table tr:nth-child(even) {",
                                         "    background-color: #adadad;",
                                         "}",
                                         ".gmisc_table tr:nth-child(odd) {",
                                         "    background-color: transparent;",
                                         "}",
                                         ".gmisc_table td {",
                                         "    background-color: transparent;",
                                         "    text-align: center;",
                                         "    border-left: 1px solid black",
                                         "}")))

Stitch the pieces together into a page:

page <- hlt::html_html(head +
                       hlt::html_body(my_table))
tab <- tempfile()
capture.output(file = tab, print(page))
browseURL(tab)

It's not clear exactly how you wanted the final formatting of the table to be; I removed the top line and added all black solid borders otherwise. But from this, I hope it illustrates how this method provides all the flexibility you could ever need. I started with the htmlTable package too for making tables on sva.se and quickly found that the needs are always more complex than the features in R packages that write html.

Upvotes: 0

Khaynes
Khaynes

Reputation: 1986

If you know basic CSS, you can easily format any element in the table quite easily:

x <- htmlTable(DataFrame, align = "c",
      rnames = FALSE,
      caption = "<b> <center> <font face = Times New Roman> Table 1. Test  <br> <br>",
      tfoot = "<b> Source </b> <br> [1]  Test Source",
      header = paste(c(" Territory", "Number of People")),
      css.caption = "color:red;",
      col.rgroup = c("none", "#ADADAD"),
      padding.tspanner = "", ctable = TRUE)


## add id to gmisc_table
x <- gsub('(?<=.gmisc_table.)', ' id = \'gmisc_table\'', x, perl = TRUE)
formats <- paste(x)
attributes(formats) <- attributes(x)

## Edit css
css <- '
<style>
/* Remove the top border */
#gmisc_table > thead > tr > th {
  border-top: none !important;
}

/* Add boarder to the table body */
#gmisc_table > tbody > tr > td {
  border: 2px solid black;
}
</style>'

gsub('^', css, formats)

Upvotes: 1

Related Questions