kable table not rendering

[ercbk]

My table (bottom of post in the link) is rendering as a standard markdown table after saving and serve_site even though I'm using knitr::kable. When I knit it in a different RMarkdown file, it renders properly. Here's the code chunk.

```{r eda-tab, echo=FALSE}

knitr::kable(matrix(c(
      '7 yrs', '67%',
      '6 yrs', '78%',
      '5 yrs', '86%',
      '4 yrs', '92%',
      NULL
), ncol = 2, byrow=TRUE, dimnames = list(NULL, c('Cutoff', '% Remaining'))),
booktabs=TRUE, caption = 'Inductees')

I've tried using a tribble, data.frame instead but I'm still getting the same results. I've also tried using kableExtra . Thought it might be my YAML output but I removed it and it didn't help.

---
title: A Baseball Dashboard in Time for Baseball Season
author: Eric Book
date: '2018-03-09'
slug: a-baseball-dashboard-in-time-for-baseball-season
categories:
  - shiny
  - sports-analysis
  - scraping
  - eda
tags:
  - shiny
  - outliers
  - rvest
  - ggridges
  - DT
draft: FALSE
output:
      blogdown::html_page:
            toc: true
            toc_depth: 2
---

Can't find anyone on SO or in your issues that's encountered this problem. It makes me think it might be a theme issue but I don't think the creator is a R user so I'm not sure how to address it with them. Here's my sessionInfo("blogdown").

> sessionInfo("blogdown")
R version 3.4.3 (2017-11-30)
Platform: i386-w64-mingw32/i386 (32-bit)
Running under: Windows 7 (build 7601) Service Pack 1

Matrix products: default

locale:
[1] LC_COLLATE=English_United States.1252  LC_CTYPE=English_United States.1252   
[3] LC_MONETARY=English_United States.1252 LC_NUMERIC=C                          
[5] LC_TIME=English_United States.1252    

attached base packages:
character(0)

other attached packages:
[1] blogdown_0.5.10

loaded via a namespace (and not attached):
 [1] Rcpp_0.12.15     bookdown_0.7     grDevices_3.4.3  withr_2.1.1.9000 digest_0.6.15    rprojroot_1.3-2 
 [7] backports_1.1.2  magrittr_1.5     evaluate_0.10.1  datasets_3.4.3   stringi_1.1.6    utils_3.4.3     
[13] graphics_3.4.3   rmarkdown_1.9    devtools_1.13.4  base_3.4.3       tools_3.4.3      stringr_1.3.0   
[19] xfun_0.1         yaml_2.1.18      compiler_3.4.3   stats_3.4.3      memoise_1.1.0    htmltools_0.3.6 
[25] knitr_1.20       methods_3.4.3   

[gadenbuie]

Unless I'm missing something, everything is working fine on the knitr::kable and blogdown side. knitr::kable() is giving you a standard HTML table, which is great, that's what that function is good at.

The reason it doesn't look right is because there's no fancy CSS styling on the table elements. From what I can tell, you're using the hugo-octopress theme and it appears that there is very minimal CSS styling for the table elements.

Here is the relevant CSS that is being applied to your tables:

table,
th,
td
 {
    border: 1px solid black;
    padding: 3px;
}
th {
    font-weight: bold;
    text-align: center;
}

which should give a table that looks like the one you're seeing.

What you can do to fix this is create a custom .css file for the table stylings (or Google around for one) inside the folder static/css, say static/css/tables.css. Then change the line for CSS overides in your config.toml to point to customCSS = ["css/tables.css"]. For reference, you can also take a look at the hugo-octopress documentation on custom CSS, which you may find helpful.

[gadenbuie]

@nllspc btw, if you post a version of your question to stack overflow and add a comment with the link here, I'll submit the above answer on SO and we can hopefully make it easier for the next person with this issue.

[ercbk]

@gadenbuie I'm not seeing any table css files on google that aren't accompanied by html and/or js files. Do I just use the css part? This doesn't sound like I'll end up with what I see when I knit an Rmd with kable.

[gadenbuie]

The difference between what you see on your blog and what you see in a knitted Rmd document is the CSS styling. In both cases, the HTML of the table with be the same. What's different is that when you use the "Knit" button in RStudio, a default CSS is used that changes the appearance of the table.

In general, this is the idea behind CSS. The underlying HTML gives the structure of the content and the CSS file modifies how it looks. If you want to change the way the table looks on your blog, then you need to change the CSS that is applied to the table. This article talks about HTML table elements and how they can be styled with CSS.

As an example, if you download the file here -- https://github.com/css-ui/table/blob/master/src/css/style.tables.css -- into your blogdown repo in the folder static/css and then modify the customCSS line to read customCSS = ["css/style.tables.css"] that will give you some basic styles to work with. You probably won't like the look, but you can then change the colors and CSS properties in the style.tables.css file until it looks the way you want.

[ercbk]

The "look" was a hundred times better. Thank you so much. That customCSS param doesn't work btw (tried to use it to add sytax highlighting last week and it failed then too). Ended up copying the theme css file into my static/css and replacing the code.

I've never asked a question on SO. To clarify, after I post the question, I should reply to my post with a link here?

[gadenbuie]

Glad that was helpful! The customCSS param does work, it's just that it was hard to tell that it did because the styling of the table wasn't radically different. You can verify your compiled HTML by navigating to public/<permalink>/index.html (where <permalink> is something like "/blog/:year-:month-:day-:slug/") and verifying that you see the following lines near the top inside the <head> tag:

  <link rel="stylesheet" href="/css/hugo-octopress.css">

  <link rel="stylesheet" href="/css/style.tables.css">

The other reason it was hard to tell is because unless you override the parameters set in hugo-octopress.css, those are applied in addition to the specific styling in style.tables.css.

Of course, having your own version of hugo-octopress.css stored in static/css/ is also a perfectly good solution.

Regarding SO, I'd recommend rephrasing the question a bit (now that you know the problem) but still in a way that you would have found it helpful a few days ago. Post the link here and I'll answer with an abridged version of the above. That way it will be easier for others to learn from this situation.

[yihui]

Sounds like the issue has been resolved here, so I'm closing it. Thanks @gadenbuie and @nllspc!

[ercbk]

SO link

[jaggaroshu]

a = data.frame(j = c("////*" , "//***/"))

kable(a)

why this is not coming as it is present in dataframe? output:- j

/////* //***/

[cderv]

@jaggaroshu thanks for having open an new issue. That is indeed better that commenting in an old thread. We will continue there! Thank you.