如何用PHP将数据库查询结果转换为垂直表格显示

嘿，作为PHP初学者遇到表格布局的问题太正常啦，我来帮你搞定这个垂直表格的需求！

你原来的代码生成的是水平表格——每行对应一条学生记录，列是字段名。要改成垂直表格，通常有两种常见的呈现方式，我都会给你代码示例：

方式一：字段名在左侧，每条记录占一列 #

这种布局下，第一列固定显示字段名称（Name/Age/Height），后面每一列对应一条学生的完整记录，结构大概是这样：

实现代码如下：

<?php
$conn = mysqli_connect("localhost", "root", "", "class");
// 检查数据库连接
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

$sql = "SELECT Name, Age, Height FROM student order by Name desc";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    // 先把所有数据存入数组，方便后续按字段维度处理
    $students = [];
    while($row = $result->fetch_assoc()) {
        $students[] = $row;
    }

    // 开始输出垂直表格
    echo "<table border='1'>";
    // 第一行：字段标题 + 每个学生的姓名（作为列标题）
    echo "<tr>";
    echo "<th>字段</th>";
    foreach ($students as $student) {
        echo "<th>" . $student['Name'] . "</th>";
    }
    echo "</tr>";

    // 输出Age对应的所有值行
    echo "<tr>";
    echo "<td><strong>Age</strong></td>";
    foreach ($students as $student) {
        echo "<td>" . $student['Age'] . "</td>";
    }
    echo "</tr>";

    // 输出Height对应的所有值行
    echo "<tr>";
    echo "<td><strong>Height</strong></td>";
    foreach ($students as $student) {
        echo "<td>" . $student['Height'] . "</td>";
    }
    echo "</tr>";

    echo "</table>";
} else {
    echo "0 results";
}
$conn->close();
?>

方式二：每条记录单独垂直显示（独立小表格） #

这种布局下，每个学生的信息会垂直排列成一个独立的小表格，适合数据量不大的场景，示例效果如下：

<table>
  <tr><th>Name</th><td>Alice</td></tr>
  <tr><th>Age</th><td>20</td></tr>
  <tr><th>Height</th><td>165</td></tr>
</table>
<br>
<table>
  <tr><th>Name</th><td>Bob</td></tr>
  <tr><th>Age</th><td>22</td></tr>
  <tr><th>Height</th><td>178</td></tr>
</table>

实现代码如下：

<?php
$conn = mysqli_connect("localhost", "root", "", "class");
// 检查数据库连接
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

$sql = "SELECT Name, Age, Height FROM student order by Name desc";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    // 循环每条记录，生成独立的垂直表格
    while($row = $result->fetch_assoc()) {
        echo "<table style='border: 1px solid #ddd; margin: 10px 0; border-collapse: collapse;'>";
        echo "<tr><th style='border: 1px solid #ddd; padding: 8px; text-align: left;'>Name</th><td style='border: 1px solid #ddd; padding: 8px;'>" . $row["Name"] . "</td></tr>";
        echo "<tr><th style='border: 1px solid #ddd; padding: 8px; text-align: left;'>Age</th><td style='border: 1px solid #ddd; padding: 8px;'>" . $row["Age"] . "</td></tr>";
        echo "<tr><th style='border: 1px solid #ddd; padding: 8px; text-align: left;'>Height</th><td style='border: 1px solid #ddd; padding: 8px;'>" . $row["Height"] . "</td></tr>";
        echo "</table>";
    }
} else {
    echo "0 results";
}
$conn->close();
?>

为什么你之前修改没成功？ #

原来的代码是在循环里每次输出<tr>（一行），里面包裹三个<td>（三个字段值），这是水平表格的逻辑。要改成垂直布局，要么需要先把所有数据存起来，再按字段维度循环输出；要么每条记录单独生成垂直的行结构，不能直接照搬原来的<tr>和<td>嵌套方式，这就是你之前没得到预期效果的核心原因哦！

内容的提问来源于stack exchange，提问作者zak leon