为什么我的HTML表格显示为纵向而非横向？

• 你当前写的表格结构本身就是纵向布局：每一行<tr>的第一个单元格是表头<th>，后面两个是对应的数据单元格，自然会呈现表头在左侧的纵向效果，和你想要的表头在顶部的横向表格逻辑完全相反。
• 额外存在CSS拼写错误：边框属性里的soild是拼写错误，正确应为solid，这个问题只会导致边框不显示，不会影响布局。

要实现横向表头的效果，需要把所有表头<th>都放在表格的第一行<tr>里，后续每一行<tr>放对应每个人的完整数据即可，修正后的完整代码如下：

<!DOCTYPE html>
<html>
<head>
<title> </title>
<style>
table, th, td {
 border: 1px solid black;
 /* 可选：添加以下代码合并边框，避免显示双线 */
 border-collapse: collapse;
}
th {
  text-align: left;
}
</style>
</head>

<body>
<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>94</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>50</td>
  </tr>
</table>
</body>
</html>

内容的提问来源于stack exchange，提问作者Ricky Bascom