在 R 中创建 HTML 表闪亮

Question

下面是在记事本中创建的表格（使用 HTML）。我需要使用标签功能在 R 闪亮中复制相同的内容。我知道我们可以在 R 闪亮的没有标签的情况下填充这个表。但是我可以知道我们如何使用 R 中的 html 标签创建这个表吗？我的意思是像下面的样本。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>

现在，您几乎可以按照 HTML 的流程将其直接转换为 R 代码，而忽略样式标记，这些标记将放置在一个函数调用中。

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

其中<对应于(也同样</对应于)。如果在关闭前一个标签之前打开一个新标签，即在打开的标签中<放置一个新标签tags$...tags$...。无论如何，最终输出只是 HTML 代码，因此请继续尝试，直到输出与您拥有的 HTML 匹配。

然而，进入决赛桌需要相当多的 CSS，因为它有额外的样式。我们使用一次tags$head(tags$style())调用将所有 CSS 代码放在一个地方以提高可读性。

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

如果您有要复制的源代码，则可以在浏览器中使用检查元素来获取 CSS 代码。如果没有，您将需要一些外部资源（如 Stackoverflow、WS3 学校、JSfiddle 等）来获得最终的 Web 应用程序。

将所有内容整合到一个 Shiny 应用程序中：

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




  '

  ))

这使：