在 PHP 中垂直從 SQL 中提取的位置數據

Question

我從 SQL 表中提取了用戶數據，但我想像使用 ex 一樣垂直定位數據。 表格單元格。 由於我是在 PHP 中執行此操作的，因此我無法弄清楚如何執行此操作。 另外，我想不出一種添加 CSS 的方法，所以我在整個'echo'中添加了一些內聯 CSS。 這是我的代碼：

<?php
    $servername = "localhost";
    $username = "root";
    $password = "";
    $dbname = "shopping_list_users";

    // Create connection
    $conn = new mysqli($servername, $username, $password, $dbname);
    // Check connection
    if ($conn->connect_error) {
        die("Connection failed: " . $conn->connect_error);
    }

    $sql = "SELECT id, username, name, surname FROM users";
    $result = $conn->query($sql);

    if ($result !== false && $result->num_rows > 0) {
        // output data of each row
        while($row = $result->fetch_assoc()) {
            echo "<p style='font-size: 2em; text-shadow: 0px 5px 12px #333333; text-align: left; font-size: 40px; margin: 30px; margin-top: 35px; font-weight: bold'>" . 
                 "ID: " . $row["id"]. "<br>",
                 "Username: " . $row["username"]. "<br>",
                 "Name: " . $row["name"]. "<br>",
                 "Surname: " . $row["surname"]. "<br>";
        }
    } else {
        echo "0 results";
    }
    $conn->close();
?>

這是它的樣子

正如我所說，我想垂直對齊$row數據，在它們各自的“標題”（ID、用戶名、姓名、姓氏）旁邊。

Answer 1

這是使用表格確實合理的情況之一。 所以這樣做：

while($row = $result->fetch_assoc()) {
    echo '<table>';
    echo "<tr><td>ID:</td><td>" . $row["id"]. "</td></tr>";
    echo "<tr><td>Username:</td><td>" . $row["username"]. "</td></tr>";
    echo "<tr><td>Name:</td><td>" . $row["name"]. "</td></tr>";
    echo "<tr><td>Surname:</td><td>" . $row["surname"]. "</td></tr>";
    echo '</table>';
}

或者，如果您真的想避免這種情況，請使用定義列表，如下所示：

while($row = $result->fetch_assoc()) {
    echo '<dl>';
    echo "<dt>ID:</dt><dd>" . $row["id"]. "</dd>";
    echo "<dt>Username:</dt><dd>" . $row["username"]. "</dd>";
    echo "<dt>Name:</dt><dd>" . $row["name"]. "</dd>";
    echo "<dt>Surname:</dt><dd>" . $row["surname"]. "</dd>";
    echo '</dl>';
}

關鍵是，如果沒有額外的標記，您將無法實現您的目標。 而這兩種方式才是正確的做法。

如果您沒有使用 CSS 定義它，表格解決方案將自動使第一列適合最大元素的所需寬度（在您的情況下為“用戶名：”）。 我對定義列表不太熟悉，但應該有適當的方法來使用 CSS 獲得良好的解決方案。

編輯：要將<dt>和<dd>放在同一行， 請參見此處。