Transforming DataFrame into Desired HTML Table Structure in R

The dataframe provided below includes the following details:

structure(list(Month = c("May-17", "A", "B", "C", "D", "E", "Apr-17", 
"A", "B", "C", "D", "E", "Mar-17", "A", "B", "C", "D", "E"), 
No = c(75L, 10L, 15L, 12L, 18L, 20L, 75L, 9L, 12L, 10L, 19L, 
25L, 72L, 8L, 13L, 9L, 18L, 24L), `Inc_%` = c("0.00%", "11.11%", 
"25.00%", "20.00%", "-5.26%", "-20.00%", "4.17%", "12.50%", 
"-7.69%", "11.11%", "5.56%", "4.17%", "0.00%", "0.00%", "0.00%", 
"0.00%", "0.00%", "0.00%"), Total = c("34,500", "1,000", 
"1,500", "2,500", "4,500", "25,000", "36,500", "1,100", "1,200", 
"2,200", "4,000", "28,000", "35,000", "1,000", "1,100", "2,000", 
"3,900", "27,000"), `Inc_%2` = c("-5.48%", "-9.09%", "25.00%", 
"13.64%", "12.50%", "-10.71%", "4.29%", "10.00%", "9.09%", 
"10.00%", "2.56%", "3.70%", "0.00%", "0.00%", "0.00%", "0.00%", 
"0.00%", "0.00%"), Mean = c("28,200", "800", "1,200", "2,200", 
"4,000", "20,000", "6,47,289", "7,57,991", "5,18,091", "6,95,407", 
"1,68,428", "9,10,521", "7,38,687", "5,87,810", "8,05,300", 
"7,67,826", "1,84,875", "11,73,866"), A = c(56L, 11L, 15L, 
19L, 10L, 1L, 50L, 10L, 10L, 10L, 10L, 10L, 56L, 11L, 15L, 
19L, 10L, 1L), Sum_A = c("27,800", "800", "1,000", "2,000", 
"4,000", "20,000", "32,500", "1,000", "1,000", "2,000", "3,500", 
"25,000", "31,800", "800", "1,000", "1,500", "3,500", "25,000"
), B = c(19L, 5L, 9L, 2L, 3L, 0L, 25L, 5L, 5L, 5L, 5L, 5L, 
16L, 5L, 9L, 2L, 0L, 0L), Sum_B = c("6,700", "200", "500", 
"500", "500", "5000", "4,000", "100", "200", "200", "500", 
"3,000", "3,200", "200", "100", "500", "400", "2,000"), `%` = c("20.00%", 
"12.00%", "22.50%", "10.50%", "11.50%", "16.20%", "20.20%", 
"10.20%", "15.50%", "14.20%", "18.20%", "18.00%", "15.00%", 
"10.20%", "13.20%", "14.50%", "15.00%", "11.20%"), Day = c(12L, 
10L, 8L, 7L, 5L, 12L, 10L, 8L, 9L, 7L, 8L, 8L, 10L, 8L, 9L, 
7L, 8L, 8L)), class = "data.frame", row.names = c(NA, -18L
))

I am seeking assistance to transform this information into an HTML table format similar to the one shown in the following link or any other visually appealing format recommended by you: https://i.sstatic.net/pmGc6.png

My challenge lies in reducing the font size of columns A, B, C, D, and E to a value smaller than the standard size (which is 11), making them italicized, and applying borders as illustrated in the example format.

cssrhtml-tablekablekableextra

Answer №1

To format your data in an HTML table with customized styling, you can utilize the kable function from the knitr package along with kableExtra. Here's how you can do it:

kable(my_df, "html", table.attr = 'style = "border-collapse: collapse;"') %>% 
  # Align table content to the left
  kable_styling(position = "left") %>%  
  # Make header row background orange
  row_spec(0, background = "orange") %>% 
  # Italicize and reduce font size of rows with Month values A-E
  row_spec(which(my_df$Month %in% LETTERS[1:5]), font_size = 10, italic = TRUE) %>% 
  # Highlight other rows in yellow and make text bold
  row_spec(which(!my_df$Month %in% LETTERS[1:5]), background = "yellow", bold = TRUE) %>% 
  # Add border to all cells
  row_spec(0:nrow(my_df), extra_css = "border: 1px solid black;")

https://i.sstatic.net/Fhtwx.png

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The Rvest loop encounters an issue when trying to redirect to another website

My current scenario involves a large list of URLs (20k lines) from which I need to extract specific data elements for analysis. Specifically, I am interested in retrieving a field known as "sol-num", which represents the solicitation number. The function b ...

rfor-loopweb-scrapingvectorizationrvest

Place two divs within a parent div that can adjust its width dynamically

Within this lengthy div, there are 4 elements arranged as follows: icon (fixed width) item_name [needs to be accommodated] item_type [needs to be accommodated] item_date (fixed width) I am currently attempting to find a way to ensure that the it ...

htmlcss

The container holding the inner elements is slightly oversized by a couple of pixels

Check out this Plunker example. Hello everyone, I am currently working on fitting two inner divs (a title bar and a canvas) inside an outer div. These inner divs are generated dynamically and have specific fixed dimensions. Below is a sample code snippet ...

csshtmlweb

Imagine a webpage with a width of 1000 pixels. Can you determine the precise horizontal position (from the left) of the div element with the unique id of "inner_div"?

Hello everyone, I hope you're doing well. I recently took a test and unfortunately got this question wrong. Imagine a web page with a width of 1000px. What is the exact horizontal (from the left) position of the div element with id "inner_div"? < ...

htmlcss

How is it possible to retrieve the flex-direction property value of a div using JavaScript?

While attempting to troubleshoot this issue using Windows Chrome 59, I utilized devtools to examine the properties. let element = document.getElementById("divId"); Upon checking the value of the element, I noticed that the object structure displayed: &g ...

javascriptcssflexbox

Display all elements that come before and after the current element

For debugging purposes, I need to output the IDs of all previous images in a check. The issue arises when trying to assign classes to all previous elements using the script below, as the images are not being added to the correct classes. $(document).on(&a ...

jqueryhtmlcss

Is there a way to create a blurred background effect while the popup is in use?

I prefer my popup to have a dark or blurred background when active. The popup itself should remain the same, with only the background being darkened. I would like a dark layer overlaying the entire page. This script should be compatible with any website wh ...

javascriptcss

Tips for creating a sub-menu within a dropdown menu

I need some help adding a sub-menu to my drop-down function. I'm not very familiar with CSS, so I'm struggling to figure out how to do it. Ideally, I want the sub-menu to open to the right when the cursor hovers over it. Below is the CSS and HTML ...

htmlcsstemplatesdrop-down-menusubmenu

Hiding a button based on the visibility of another button in the user's viewport

Is there a way to dynamically hide button B when the user scrolls and button A becomes visible on the screen? Additionally, how can we show button B again once button A is no longer visible to the user? Both buttons should never be visible simultaneously. ...

javascripthtmljquerycss

Display picture within a modal window, regardless of whether it is the identical image

I have a file input that allows the user to upload an image. After selecting an image, a modal opens with the uploaded image displayed inside. You can view a demo of this functionality in action on this Fiddle Example: Here is the corresponding code snip ...

javascriptjqueryhtmlcsstwitter-bootstrap

Is logical support available for the error in KNN imputation in R?

After attempting to use both caret and DMwR for imputation, I encountered errors. Y = 35 impu = preProcess(dat[, -Y], method = c('knnImpute')) dat1 = predict(impu, newdata = dat[, -Y]) # Error in `[.data.frame`(old, , non_missing_cols, drop = F ...

rr-caretimputation

Verify the presence of rows in SQL Server using R before proceeding to insert or update them

I am currently working with a table that has the following structure: ID Entity UserName UserRole UserStatus UpdatedDate A clustered key is defined on the columns Entity, UserName, UserRole. The UserStatus for a specific Entity-UserName-UserRole combinat ...

sqlrsql-server

Update the icon within the expandable display

Is there a way to change the plus sign to a minus sign in an expandable table view on click? (changing fa fa-plus to fa fa-minus) The goal is to have the plus sign displayed when the view is compressed and the minus sign displayed when it is expanded. If ...

javascriptjquerycss

Alter the orientation of the current CSS shadow

Looking to modify the direction of a CSS shadow without adjusting the color or strength? box-shadow:green 0 1px 3px; I attempted to change the shadow direction only with the following code: box-shadow:inherit 2px 0 inherit; Unfortunately, this approach ...

cssshadowinheritance

What could be causing the unresponsive hamburger button on my navbar?

As a beginner in HTML and Flask, I am attempting to create a navbar. However, I am encountering an issue with the hamburger button not functioning properly. When I resize the window smaller, the hamburger button appears but does not show the items like "Lo ...

htmlcssflask

Learn how to automatically set the checked state of a radio button by toggling another radio button

I have two sets of radio buttons, each with four options. The first set has no default selection (unchecked) using jQuery, while the second set has the first option checked by default. What I'm looking to achieve is that when a radio button in the f ...

javascriptjqueryhtmlcss

Chosen Buttons for Emailing

I have recently created a multistep form and have implemented functionality to receive the form contents via PHP email. However, I am facing a challenge where, when I navigate through the form and encounter multiple buttons to choose from, the email I rece ...

phphtmlcss

What are some strategies for maintaining a responsive layout with or without a sidebar?

I've made the decision to incorporate a sidebar on the left side of all pages across my website. This sidebar must have the ability to be either hidden or shown, without overlapping the existing content on the page. However, I'm encountering an ...

htmlcss

Is there a way to effortlessly generate a mini-website from Markdown files?

Can a tool be found that creates a mini-website from locally-stored Markdown files complete with automatically generated navigation? I'm hoping for a service that can sync with my Dropbox, analyze the file structure, read the Markdown files, and effo ...

cssmarkdowndropboxwikijekyll

How can CSS be used to center multi-line text with the shortest line appearing at the top

I'm currently working on some html and css code that looks like this: <div style="width: 40em; text-align: center;"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard du ...

htmlcsstextalignment