Creating HTML table in R shiny

Question

Below is the table created in Notepad (using HTML). I need to replicate the same in R shiny using tags feature. I know we can populate this table without tags in R shiny. But may I please know how do we create this table using html tags in R shiny? I mean like below in sample. HTML and CSS experts anyone can help me here?

sample

tags$table(tags$thead("Head", tags$tr.........)))

Answer 1

Since you haven't provided the HTML code that made that table, I've reproduced it myself:

<table border = "5">
  <thead>
    <tr>
      <th colspan="2" height = "100" width = "800">TABLE TITLE</th>
    </tr>
  </thead>
  <tbody>
    <tr>
        <style>
        tr:nth-child(1) { border: solid thick; }
        </style>
      <td align = "center"><strong>Column A</strong></td>
      <td align = "center"><strong>Column B</strong></td>
    </tr>
    <tr style="border: solid thick">
      <td align = "center"><strong>Data 1</strong></td>
      <td align = "center"><strong>Data 2</strong></td>
  </tbody>
</table>

Now you can pretty much directly translate this into R code following the flow of the HTML, ignoring style tags, which will be placed in one function call.

  tags$head(tags$table(border = 5, 
                       tags$thead(
                         tags$tr(
                           tags$th(colspan = 2, height = 100, width = 800, 
                                   align = "center", "TABLE TITLE")
                           )
                       ), 
                       tags$tbody(
                         tags$tr(
                           tags$td(align = "center", strong("Column A")),
                           tags$td(align = "center", strong("Column B"))
                         ),
                         tags$tr(
                           tags$td(align = "center", "Data 1"),
                           tags$td(align = "center", "Data 2")
                         )
                       )
  )
  )

Where < corresponds to ( and likewise </ corresponds to ). If a new tag is opened before the previous one is closed, i.e. < place a new tags$... inside the open tags$.... The final output is just HTML code anyway, so keep trying until the output matches the HTML you have.

However, it takes a fair bit of CSS to get to the final table, as it has additional styling. We use a single tags$head(tags$style()) call to place all our CSS code in one place for readability.

  tags$head(tags$style(

  'thead {
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit;
  }

    tr:nth-child(1) {
      border: solid thick;
    }

    tr:nth-child(2) {
      border: solid thick;
    }

    th {
      text-align: center
      ;
      }

   td, th {
    outline: none;
   }

    table { 
      display: table;
      border-collapse: separate;
      white-space: normal;
      line-height: normal;
      font-family: times-new-roman;
      font-weight: normal;
      font-size: medium;
      font-style: normal;
      color: -internal-quirk-inherit;
      text-align: start;
      border-spacing: 2px;
      border-color: grey;
      font-variant: normal;
    }  

    td {
      display: table-cell;
      vertical-align: inherit;
    }

    tr {
      display: table-row;
      vertical-align: inherit;
    }




  '

  ))

If you have the source code you are trying to replicate, you can use inspect element in your browser to get CSS code. If not, you will need some outside resources (like Stackoverflow, WS3 schools, JSfiddle etc) to get your final web app.

Putting it all together in one Shiny App:

library(shiny)

ui <- fluidPage(

  tags$head(tags$style(

  'thead {
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit;
  }

    tr:nth-child(1) {
      border: solid thick;
    }

    tr:nth-child(2) {
      border: solid thick;
    }

    th {
      text-align: center
      ;
      }

   td, th {
    outline: none;
   }

    table { 
      display: table;
      border-collapse: separate;
      white-space: normal;
      line-height: normal;
      font-family: times-new-roman;
      font-weight: normal;
      font-size: medium;
      font-style: normal;
      color: -internal-quirk-inherit;
      text-align: start;
      border-spacing: 2px;
      border-color: grey;
      font-variant: normal;
    }  

    td {
      display: table-cell;
      vertical-align: inherit;
    }

    tr {
      display: table-row;
      vertical-align: inherit;
    }




  '

  )),

  tags$head(tags$table(border = 5, 
                       tags$thead(
                         tags$tr(
                           tags$th(colspan = 2, height = 100, width = 800, 
                                   align = "center", "TABLE TITLE")
                           )
                       ), 
                       tags$tbody(
                         tags$tr(
                           tags$td(align = "center", strong("Column A")),
                           tags$td(align = "center", strong("Column B"))
                         ),
                         tags$tr(
                           tags$td(align = "center", "Data 1"),
                           tags$td(align = "center", "Data 2")
                         )
                       )
  )
  )
)


server <- function(input, output, session) {

}

shinyApp(ui, server)

Which gives: