使用for循环生成HTML表格表头出现格式错乱的原因？

你这个问题是HTML标签闭合顺序错误导致的！咱们看你最后一行代码：你把</thead>写在了</tr>前面，这完全搞反了表头的结构逻辑。

错误原因 #

正确的表头HTML结构应该是：

<thead>
  <tr>
    <th>属性1</th>
    <th>属性2</th>
    ...
  </tr>
</thead>

而你的代码最后一步是先闭合<thead>再闭合<tr>，相当于提前结束了表头容器，剩下的<th>标签会被浏览器自动修复成新的行（浏览器会自动补全缺失的<tr>），所以才会出现每个表头单独占一行的情况。

修正后的代码 #

把标签闭合顺序调换过来就行：

let table = document.getElementById("outputTable");
table.innerHTML = `<thead><tr>`;
for(const attribute in student_sample){
    table.innerHTML += `<th>${attribute}</th>`;
}
table.innerHTML += `</tr></thead>`; // 先闭合<tr>，再闭合<thead>

优化小建议 #

另外，多次修改innerHTML会触发多次DOM重绘，性能不太友好。可以先把整个表头的HTML字符串拼接好，再一次性赋值给innerHTML：

let table = document.getElementById("outputTable");
let headerContent = `<thead><tr>`;

for(const attribute in student_sample){
    headerContent += `<th>${attribute}</th>`;
}

headerContent += `</tr></thead>`;
table.innerHTML = headerContent;

这样只需要操作一次DOM，效率会更高~

内容的提问来源于stack exchange，提问作者Guillermo Herrera