使用HTML和JavaScript水平显示表格标题和内容的问题

所以我试图水平显示一张桌子，但我觉得我的计数器干扰了我桌子的布局。代码按照我希望的方式工作，这一阶段的问题在于设计

var得分=[]；
函数（）{
对于（var i=1；i检查下面的代码，首先检查变量中的所有数据，然后插入表中


var得分=[]；
函数（）{
对于（var i=1；i您每次调用它时实际上都在th和td中创建另一个tbody，这就是为什么每次都创建一个新行并使数据垂直对齐的原因。因此，下面的代码将所有内容放入一个数据变量中，并调用“display”还有，你忘了在th和td上写结束标记，所以你实际上需要修复它

  function displayScores(){
  var Data;
    for(var i=1; i<=10; i++){
        Data = ("<th>Score " + i + "</th> <td style='padding: 5px;'><center>" + scores[i] + "</center></td>");  
        document.getElementById("display").innerHTML += ("<tr>"+ Data +"</tr>");
    }
  };

函数displayScores（）{
var数据；
对于（var i=1；i首先，更好的JS实践（+css），（应该改进）


const TableDisplay=document.getElementById（'display'））
，bt_enterScores=document.getElementById（'enterScores'）
，bt_displayScores=document.getElementById（'displayScores'）
，bt_Average=document.getElementById（'Average'））
，v_average=document.getElementById（'average-val'））
var得分=[]；
bt_enterScores.onclick=\u=>
{
对于（var i=1；i
{
TableDisplay.innerHTML=null//删除所有表数据
让t_head=TableDisplay.createTHead（）
，t_body=TableDisplay.appendChild（document.createElement（'tbody'））
，refCell=0
t_头插入行（-1）
t_主体插入行（-1）
分数。forEach（（v，i）=>
{
t_head.rows[0].insertCell（refCell.innerText=`Score${i}`
t_body.rows[0]。插入单元格（refCell++）。innerText=v
})
}
bt_Average.onclick=\u=>
{
设和=0；
对于（变量i=1；i

：根目录{
--sz字体：16px；
}
桌子{
边界塌陷：塌陷；
字体系列：富兰克林哥特式中字体、Arial窄字体、Arial无衬线字体；
字体大小：var（--sz字体）；
}
泰德{
字体大小：粗体；
}
运输署{
文本对齐：居中；
边框：1px纯灰；
填充物：2px 5px；
空白：nowrap；
}
#平均值{
字体系列：富兰克林哥特式中字体、Arial窄字体、Arial无衬线字体；
字体大小：var（--sz字体）；
字体大小：粗体；
}
输入分数
显示分数
计算平均数



使用
innerHTML
是不好的……而且也不尊重
html结构！