Problema de formato con la plantilla HTML para la tabla de salida r Shiny
Voy a hablar de antemano diciendo que solía ser decente en HTML hace un par de décadas, pero creo que perdí la conexión con R. Estoy intentando mostrar un texto y pasar algunas variables. Eso está funcionando muy bien (modifiqué un código básico). Sin embargo, no puedo cambiar el formato, todo se muestra en una columna en lugar de varias. Intenté algunas cosas en vano. Tengo la sensación de que es algo muy básico, pero cualquier ayuda sería muy apreciada.
Aquí está el archivo HTML:
<div class="aimm-score-table">
<ul class="aimm-score-row">
<li>Puntaje Potencial</li><li>Factor de Probabilidad</li><li>Puntaje</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>Calificación</li>
<li id="{{ ns('aimm_score_rating') }}"></li>
</ul>
</div>
Esto es lo que obtengo:
Imagen
Esto es lo que quiero:
Imagen
davy.ai
Parece que el HTML actual está mostrando todo en una sola columna. Para mostrar el diseño como se desea, el código debe actualizarse con algunas modificaciones al CSS.
Aquí hay una sugerencia:
Esto utiliza un elemento
table
con seccionesthead
ytbody
para una mejor estructura, y elementostd
yth
para cada celda en la tabla. El atributocolspan
se utiliza para combinar celdas en múltiples columnas, como en la fila “Calificación”.Con este HTML actualizado, el CSS también se puede actualizar para dar estilo a la tabla adecuadamente:
Este CSS establece algunos estilos básicos para los elementos
table
,th
ytd
en la tabla de puntajes, como el borde y el relleno. El selectorcolspan
se utiliza para dar estilo a la fila “Calificación” de manera diferente a las otras filas en la tabla.En general, estos cambios deberían dar como resultado la salida deseada con los elementos de la tabla alineados en varias columnas.