在 R Shiny 中创建 HTML 表格

Question

下面是在记事本中创建的表格（使用 HTML）。我需要使用标签功能在 R闪亮中复制相同的内容。我知道我们可以在没有 R闪亮标签的情况下填充这个表。但我可以知道如何使用 R闪亮中的html标签创建这个表吗？我的意思是像下面的示例一样。HTML 和 CSS 专家有人可以帮助我吗？

样本

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

Answer 1

由于您没有提供制作该表的 HTML 代码，我自己复制了它：<table border = "5">&nbsp; <thead>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <th colspan="2" height = "100" width = "800">TABLE TITLE</th>&nbsp; &nbsp; </tr>&nbsp; </thead>&nbsp; <tbody>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <style>&nbsp; &nbsp; &nbsp; &nbsp; tr:nth-child(1) { border: solid thick; }&nbsp; &nbsp; &nbsp; &nbsp; </style>&nbsp; &nbsp; &nbsp; <td align = "center"><strong>Column A</strong></td>&nbsp; &nbsp; &nbsp; <td align = "center"><strong>Column B</strong></td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr style="border: solid thick">&nbsp; &nbsp; &nbsp; <td align = "center"><strong>Data 1</strong></td>&nbsp; &nbsp; &nbsp; <td align = "center"><strong>Data 2</strong></td>&nbsp; </tbody></table>现在，您几乎可以按照 HTML 流程直接将其转换为 R 代码，忽略将放置在一个函数调用中的样式标签。&nbsp; tags$head(tags$table(border = 5,&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;tags$thead(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;tags$tr(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;tags$th(colspan = 2, height = 100, width = 800,&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;align = "center", "TABLE TITLE")&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;),&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;tags$tbody(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;tags$tr(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;tags$td(align = "center", strong("Column A")),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;tags$td(align = "center", strong("Column B"))&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;tags$tr(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;tags$td(align = "center", "Data 1"),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;tags$td(align = "center", "Data 2")&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;)&nbsp; )&nbsp; )其中<对应于(且同样</对应于)。如果在前一个标签关闭之前打开一个新标签，即在 open 中<放置一个新标签。无论如何，最终的输出只是 HTML 代码，因此请继续尝试，直到输出与您拥有的 HTML 匹配为止。tags$...tags$...然而，需要相当多的 CSS 才能进入决赛桌，因为它有额外的样式。我们使用一次tags$head(tags$style())调用将所有 CSS 代码放在一个位置以提高可读性。&nbsp; tags$head(tags$style(&nbsp; 'thead {&nbsp; &nbsp; display: table-header-group;&nbsp; &nbsp; vertical-align: middle;&nbsp; &nbsp; border-color: inherit;&nbsp; }&nbsp; &nbsp; tr:nth-child(1) {&nbsp; &nbsp; &nbsp; border: solid thick;&nbsp; &nbsp; }&nbsp; &nbsp; tr:nth-child(2) {&nbsp; &nbsp; &nbsp; border: solid thick;&nbsp; &nbsp; }&nbsp; &nbsp; th {&nbsp; &nbsp; &nbsp; text-align: center&nbsp; &nbsp; &nbsp; ;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp;td, th {&nbsp; &nbsp; outline: none;&nbsp; &nbsp;}&nbsp; &nbsp; table {&nbsp;&nbsp; &nbsp; &nbsp; display: table;&nbsp; &nbsp; &nbsp; border-collapse: separate;&nbsp; &nbsp; &nbsp; white-space: normal;&nbsp; &nbsp; &nbsp; line-height: normal;&nbsp; &nbsp; &nbsp; font-family: times-new-roman;&nbsp; &nbsp; &nbsp; font-weight: normal;&nbsp; &nbsp; &nbsp; font-size: medium;&nbsp; &nbsp; &nbsp; font-style: normal;&nbsp; &nbsp; &nbsp; color: -internal-quirk-inherit;&nbsp; &nbsp; &nbsp; text-align: start;&nbsp; &nbsp; &nbsp; border-spacing: 2px;&nbsp; &nbsp; &nbsp; border-color: grey;&nbsp; &nbsp; &nbsp; font-variant: normal;&nbsp; &nbsp; }&nbsp;&nbsp;&nbsp; &nbsp; td {&nbsp; &nbsp; &nbsp; display: table-cell;&nbsp; &nbsp; &nbsp; vertical-align: inherit;&nbsp; &nbsp; }&nbsp; &nbsp; tr {&nbsp; &nbsp; &nbsp; display: table-row;&nbsp; &nbsp; &nbsp; vertical-align: inherit;&nbsp; &nbsp; }&nbsp; '&nbsp; ))如果您有尝试复制的源代码，则可以在浏览器中使用检查元素来获取 CSS 代码。如果没有，您将需要一些外部资源（例如 Stackoverflow、WS3 学校、JSfiddle 等）来获得最终的 Web 应用程序。将所有内容整合到一个闪亮的应用程序中：library(shiny)ui <- fluidPage(&nbsp; tags$head(tags$style(&nbsp; 'thead {&nbsp; &nbsp; display: table-header-group;&nbsp; &nbsp; vertical-align: middle;&nbsp; &nbsp; border-color: inherit;&nbsp; }&nbsp; &nbsp; tr:nth-child(1) {&nbsp; &nbsp; &nbsp; border: solid thick;&nbsp; &nbsp; }&nbsp; &nbsp; tr:nth-child(2) {&nbsp; &nbsp; &nbsp; border: solid thick;&nbsp; &nbsp; }&nbsp; &nbsp; th {&nbsp; &nbsp; &nbsp; text-align: center&nbsp; &nbsp; &nbsp; ;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp;td, th {&nbsp; &nbsp; outline: none;&nbsp; &nbsp;}&nbsp; &nbsp; table {&nbsp;&nbsp; &nbsp; &nbsp; display: table;&nbsp; &nbsp; &nbsp; border-collapse: separate;&nbsp; &nbsp; &nbsp; white-space: normal;&nbsp; &nbsp; &nbsp; line-height: normal;&nbsp; &nbsp; &nbsp; font-family: times-new-roman;&nbsp; &nbsp; &nbsp; font-weight: normal;&nbsp; &nbsp; &nbsp; font-size: medium;&nbsp; &nbsp; &nbsp; font-style: normal;&nbsp; &nbsp; &nbsp; color: -internal-quirk-inherit;&nbsp; &nbsp; &nbsp; text-align: start;&nbsp; &nbsp; &nbsp; border-spacing: 2px;&nbsp; &nbsp; &nbsp; border-color: grey;&nbsp; &nbsp; &nbsp; font-variant: normal;&nbsp; &nbsp; }&nbsp;&nbsp;&nbsp; &nbsp; td {&nbsp; &nbsp; &nbsp; display: table-cell;&nbsp; &nbsp; &nbsp; vertical-align: inherit;&nbsp; &nbsp; }&nbsp; &nbsp; tr {&nbsp; &nbsp; &nbsp; display: table-row;&nbsp; &nbsp; &nbsp; vertical-align: inherit;&nbsp; &nbsp; }&nbsp; '&nbsp; )),&nbsp; tags$head(tags$table(border = 5,&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;tags$thead(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;tags$tr(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;tags$th(colspan = 2, height = 100, width = 800,&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;align = "center", "TABLE TITLE")&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;),&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;tags$tbody(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;tags$tr(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;tags$td(align = "center", strong("Column A")),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;tags$td(align = "center", strong("Column B"))&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;tags$tr(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;tags$td(align = "center", "Data 1"),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;tags$td(align = "center", "Data 2")&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;)&nbsp; )&nbsp; ))server <- function(input, output, session) {}shinyApp(ui, server)这使：