Formatting issue with HTML template for r Shiny output table

Question

I'll preface this by saying that I used to decent at HTML a couple of decades ago but I think I missed the connection with R. I'm trying to display some text and pass some variables. That is working great (I modified some basic code). However, I'm unable to change the format as everything is showing in one column instead of several. I tried a few things in vain. I have a feeling it's really basic but any help would be greatly appreciated. Here is the HTML file :

<div class="aimm-score-table">
  <ul class="aimm-score-row">
    <li>Potential Score</li><li>Likelihood factor</li><li>Score</li>
   </ul>
  <ul class="aimm-score-row">
    <li id="{{ ns('aimm_score_potential_score') }}"></li>
    <li>--</li>
    <li id="{{ ns('aimm_score_likelihood_factor') }}"></li>
    <li>=</li>
    <li id="{{ ns('aimm_score_score') }}"></li>
  </ul>
  <ul class="aimm-score-row">
    <li>Rating</li>
    <li id="{{ ns('aimm_score_rating') }}"></li>
  </ul>
</div>

This is what I get :

This is what I want :

Answer 1

Stéphane Laurent many thanks, I integrated your code to my html template and this works like a charm. @YBS I'm not familiar with the use of htmltable but I had to find a way to recycle variables stored under a www/ folder that are called from my ui :

htmlTemplate(
                      filename = "www/html/aimm_score_table.html",
                      ns = ns
                    ),

and use an html table seemed the only way, I'm not used to combining different types of codes and storing stephanes as a template was the most straightforward. Thank you both!

Answer 2

Here is a way. Of course you will have to change the CSS if you want other borders, etc.

library(htmltools)

tbl <- withTags(
  table(
    tbody(
      tr(
        td(colspan = 3, class="col3", "Potential"),
        td(colspan = 3, class="col3", "Likelihood"),
        td(colspan = 3, class="col3", "Ex-Ante")
      ),
      tr(
        td(),
        td("88"),
        td(colspan = 2, class="col2", "-"),
        td("17"),
        td(colspan = 2, class="col2", "="),
        td("61"),
        td()
      ),
      tr(
        td(colspan = 3, class="col3"),
        td(colspan = 3, class="col3"),
        td(colspan = 3, class="col3", "Good")
      )
    )
  )
)

browsable(
  tagList(
    tags$style(
      HTML(
        "table {width: 400px; table-layout: fixed}",
        "table, td {border: 1px solid black}",
        "td {text-align: center}",
        "td.col3 {width: calc(100% / 3)",
        "td.col2 {width: calc(100% * 2 / 9)",
        "td {width: calc(100% / 9)"
      )
    ),
    tbl
  )
)