PHP中如何将while循环输出的SQL查询结果渲染为纵向HTML表格并支持多表头？

问题原因 #

当前单元格横向排列是因为所有<td>标签没有被<tr>（表格行标签）包裹，浏览器会默认把所有零散的<td>放在同一行渲染。同时原代码存在HTML标签写在PHP代码块内的语法错误，也会导致渲染异常。

修正后代码 #

<html>
<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}
</style>

<table style="width:100%">
  <tr>
    <!-- 可按需新增任意数量表头 -->
    <th>ID</th>
    <th>message</th>
    <th>发布时间</th>
  </tr> 
<?php
while ($row = $resultSet->fetch_assoc()) {
    // 每条数据包裹一个tr标签，实现单条数据独占一行纵向排列
    echo "<tr>";
    // 与表头一一对应输出td即可
    echo "<td>" . $row['id'] . "</td>";
    echo "<td>" . $row['message'] . "</td>";
    echo "<td>" . $row['create_time'] . "</td>";
    echo "</tr>";   
}
?>
</table>
</html>

关键改动说明 #

• 修复了HTML与PHP混写的语法错误，将表格、表头标签移出PHP代码块，避免解析报错
• 循环输出单条查询结果时，所有<td>外层套了<tr>标签，每条数据独立成一行，自然纵向排列
• 表头区域可任意新增<th>标签，只需在循环内对应增加对应字段的<td>输出即可适配多列表头场景

适配多字段的优化方案 #

如果查询返回的字段数量多，不想手动编写每个<td>，可以通过遍历行数据自动输出：

while ($row = $resultSet->fetch_assoc()) {
    echo "<tr>";
    foreach ($row as $value) {
        // htmlspecialchars 用于避免内容中的特殊字符破坏页面结构，防范XSS风险
        echo "<td>" . htmlspecialchars($value) . "</td>";
    }
    echo "</tr>";
}

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