Создание HTML таблицы в R блестящий

Question

Ниже приведена таблица, созданная в блокноте (с использованием HTML). Мне нужно повторить то же самое в R блестящий, используя функцию тегов. Я знаю, что мы можем заполнить эту таблицу без меток R блестящий. Но могу ли я узнать, как мы можем создать эту таблицу, используя теги html в R блестящий? Я имею в виду, как показано ниже в примере. HTML и CSS эксперты, кто-нибудь может помочь мне здесь?

образец

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

Answer 1

Поскольку вы не предоставили код HTML, который создал эту таблицу, я сам воспроизвел его:

<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>

Теперь вы можете в значительной степени напрямую перевести это в код R, следуя потоку HTML, игнорируя теги стиля, которые будут помещены в один вызов функции.

  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")
                         )
                       )
  )
  )

Где < соответствует (, а также </ соответствует ). Если новый тег открывается до закрытия предыдущего, т.е. <, поместите новый tags$... внутрь открытого tags$.... В конечном итоге это всего лишь код HTML, поэтому продолжайте попытки до тех пор, пока результат не совпадет с HTML.

Однако, чтобы добраться до финальной таблицы, потребуется немало CSS, так как это имеет дополнительный стиль. Мы используем один вызов tags$head(tags$style()), чтобы поместить весь наш код CSS в одно место для удобства чтения.

  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;
    }




  '

  ))

Если у вас есть исходный код, который вы пытаетесь скопировать, вы можете использовать элемент inspect в вашем браузер, чтобы получить CSS код. Если нет, вам понадобятся некоторые внешние ресурсы (например, Stackoverflow, школы WS3, JSfiddle et c), чтобы получить ваше окончательное веб-приложение.

Соберите все это вместе в одном блестящем приложении:

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)

Что дает: