PHP 循環輸出 Table 實現單行雙列佈局的兩種經典寫法

PHP 循環輸出 Table 實現單行雙列佈局的兩種經典寫法

在產品列表、圖片牆、評論區等場景中，「單行雙列」是高頻佈局需求。本文提供兩種主流實現：模數判斷法（傳統、兼容性好）與 array_chunk 分塊法（現代、語義清晰），並對比優劣。

方法一：模數判斷法 (傳統經典)

<table width="100%" border="0" cellspacing="1" cellpadding="0">
    <tr>
        <th>第一列</th>
        <th>第二列</th>
    </tr>
    <tr>
    <?php
    $data = range(0, 9); // 模擬數據庫查詢結果 [0,1,2,3,4,5,6,7,8,9]
    $count = count($data);
    foreach ($data as $i => $val) {
        $idx = $i + 1; // 1-based 便於模數判斷
        echo "<td align='center' bgcolor='#FFFFFF'>{$val}</td>";
        
        // 偶數列且非最後一個元素 → 閉合行、開啟新行
        if ($idx % 2 === 0 && $idx < $count) {
            echo "</tr><tr>";
        }
    }
    ?>
    </tr>
</table>

邏輯關鍵

• $idx % 2 === 0：每兩個元素換行。
• && $idx < $count：最後一行若恰好雙數，避免產生空 <tr></tr>。
• 適用於任意可遍歷數據源，無需預先載入全量陣列。

方法二：array_chunk 分塊法 (現代推薦)

<table width="100%" border="0" cellspacing="1" cellpadding="0">
    <tr>
        <th>第一列</th>
        <th>第二列</th>
    </tr>
    <?php
    $data = range(0, 9);
    $rows = array_chunk($data, 2); // 切分為 [[0,1], [2,3], [4,5], [6,7], [8,9]]
    
    foreach ($rows as $row) {
        echo "<tr>";
        foreach ($row as $cell) {
            echo "<td align='center' bgcolor='#FFFFFF'>{$cell}</td>";
        }
        // 單數最後一行補空單元格保持結構
        if (count($row) === 1) {
            echo "<td align='center' bgcolor='#FFFFFF'>&nbsp;</td>";
        }
        echo "</tr>";
    }
    ?>
</table>

優勢

• 邏輯與視圖分離：先處理數據結構，再純渲染。
• 自動處理奇數行補齊，無需手動判斷邊界。
• 易擴展為三列、四列：只需修改 array_chunk($data, 3)。

字符串分割補充：explode() 用法

文中原例另附字符串分割示例：

<?php
$str = "Hello world. It's a beautiful day.";
print_r(explode(" ", $str));
/* 輸出：
Array (
    [0] => Hello
    [1] => world.
    [2] => It's
    [3] => a
    [4] => beautiful
    [5] => day.
)
*/
?>

對比總結

CSS 現代替代方案

若不強制要求 <table>，推薦使用 Flex/Grid 佈局，HTML 結構更語義化：

<div class="grid-2cols">
    <?php foreach ($data as $item): ?>
        <div class="card"><?= $item ?></div>
    <?php endforeach; ?>
</div>

<style>
.grid-2cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.card { background: #fff; padding: 16px; border: 1px solid #eee; }
</style>

根據項目約束（郵件模板、老系統、PDF 生成）選擇 Table 或 CSS 方案。