下面是在記事本中創(chuàng)建的表格（使用 HTML）。我需要使用標(biāo)簽功能在 R閃亮中復(fù)制相同的內(nèi)容。我知道我們可以在沒有 R閃亮標(biāo)簽的情況下填充這個(gè)表。但我可以知道如何使用 R閃亮中的html標(biāo)簽創(chuàng)建這個(gè)表嗎？我的意思是像下面的示例一樣。HTML 和 CSS 專家有人可以幫助我嗎？樣本tags$table(tags$thead("Head", tags$tr.........)))
1 回答
慕婉清6462132
TA貢獻(xiàn)1804條經(jīng)驗(yàn) 獲得超2個(gè)贊
由于您沒有提供制作該表的 HTML 代碼，我自己復(fù)制了它：
<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>
現(xiàn)在，您幾乎可以按照 HTML 流程直接將其轉(zhuǎn)換為 R 代碼，忽略將放置在一個(gè)函數(shù)調(diào)用中的樣式標(biāo)簽。
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")
)
)
)
)
其中<對(duì)應(yīng)于(且同樣</對(duì)應(yīng)于)。如果在前一個(gè)標(biāo)簽關(guān)閉之前打開一個(gè)新標(biāo)簽，即在 open 中<放置一個(gè)新標(biāo)簽。無(wú)論如何，最終的輸出只是 HTML 代碼，因此請(qǐng)繼續(xù)嘗試，直到輸出與您擁有的 HTML 匹配為止。tags$...tags$...
然而，需要相當(dāng)多的 CSS 才能進(jìn)入決賽桌，因?yàn)樗蓄~外的樣式。我們使用一次tags$head(tags$style())調(diào)用將所有 CSS 代碼放在一個(gè)位置以提高可讀性。
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;
}
'
))
如果您有嘗試復(fù)制的源代碼，則可以在瀏覽器中使用檢查元素來獲取 CSS 代碼。如果沒有，您將需要一些外部資源（例如 Stackoverflow、WS3 學(xué)校、JSfiddle 等）來獲得最終的 Web 應(yīng)用程序。
將所有內(nèi)容整合到一個(gè)閃亮的應(yīng)用程序中：
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)
這使：
- 1 回答
- 0 關(guān)注
- 150 瀏覽
添加回答
舉報(bào)
0/150
提交
取消