您现在的位置：程式碼之家 >> 編程語言 > >> 網頁程式設計 >> PHP 程式設計 >> PHP 相關知識

PHP 實現表格隔行換色：三種寫法從入門到進階

編輯：PHP 相關知識

基礎版：迴圈內判斷奇偶

<?php
echo "<ul>";
for ($i = 1; $i <= 5; $i++) {
    $color = ($i % 2 === 0) ? 'yellow' : 'red';
    echo "<li style='background:{$color}; width:200px;'>這是第 {$i} 行</li>";
}
echo "</ul>";
?>

進階版：CSS nth-child 純樣式分離 (推薦)

<style>
.table-striped tbody tr:nth-child(odd)  { background: #f9f9f9; }
.table-striped tbody tr:nth-child(even) { background: #eef; }
</style>

<table class="table-striped">
  <tbody>
    <?php for ($i=1; $i<=5; $i++): ?>
    <tr><td>第 <?= $i ?> 行資料</td></tr>
    <?php endfor; ?>
  </tbody>
</table>

優點：HTML 乾淨、無 PHP 邏輯耦合、瀏覽器原生渲染、支援動態增減列。

物件導向版：可復用的 TableHelper

<?php
class TableHelper {
    public static function render(array $rows, array $columns, $oddClass='odd', $evenClass='even') {
        echo "<table><thead><tr>";
        foreach ($columns as $col) echo "<th>{$col}</th>";
        echo "</tr></thead><tbody>";
        foreach ($rows as $i => $row) {
            $class = ($i % 2 === 0) ? $oddClass : $evenClass;
            echo "<tr class='{$class}'>";
            foreach ($columns as $col) echo "<td>".htmlspecialchars($row[$col] ?? '')."</td>";
            echo "</tr>";
        }
        echo "</tbody></table>";
    }
}

// 使用
$data = [
    ['id'=>1, 'name'=>'張三', 'age'=>20],
    ['id'=>2, 'name'=>'李四', 'age'=>22],
];
TableHelper::render($data, ['id','name','age']);
?>

CSS 變數版 (現代瀏覽器)

:root {
  --row-odd:  #fff;
  --row-even: #f0f4ff;
}
tr:nth-child(odd)  { background: var(--row-odd); }
tr:nth-child(even) { background: var(--row-even); }