纯CSS法（最推荐）
这是最现代、最灵活的方法，它将样式（颜色）与内容（HTML）分离，维护起来非常方便，无论你的表格数据是动态调用还是静态写死的,都只需修改CSS代码即可。
（图片来源网络，侵删）
操作步骤：
-
准备你的HTML表格 在你的模板文件（如
article_article.htm）中，确保你的表格有<table>标签，<tr>（行）标签有规律地出现。<table class="zebra-table"> <tr> <th>标题</th> <th>发布时间</th> <th>点击量</th> </tr> <tr> <td>文章标题一</td> <td>2025-10-27</td> <td>123</td> </tr> <tr> <td>文章标题二</td> <td>2025-10-26</td> <td>456</td> </tr> <tr> <td>文章标题三</td> <td>2025-10-25</td> <td>789</td> </tr> <tr> <td>文章标题四</td> <td>2025-10-24</td> <td>1011</td> </tr> </table>关键点：给
<table>标签添加一个class属性，class="zebra-table",这样我们就可以在CSS中精确地控制这个表格的样式。 -
编写CSS代码 将以下CSS代码添加到你的模板文件头部
<head>标签内，或者更推荐的方式是，添加到你的网站全局CSS文件中（/templets/你的模板/style/css.css）。/* 定义斑马线表格的样式 */ .zebra-table tr:nth-child(even) { background-color: #f2f2f2; /* 偶数行的背景色，例如浅灰色 */ } .zebra-table tr:nth-child(odd) { background-color: #ffffff; /* 奇数行的背景色，例如白色 */ } /* 鼠标悬停高亮效果（可选） */ .zebra-table tr:hover { background-color: #e6f7ff; /* 鼠标移上去时的颜色，例如浅蓝色 */ } /* 表头样式（可选） */ .zebra-table th { background-color: #fafafa; font-weight: bold; } -
效果
（图片来源网络，侵删）nth-child(even)：选择所有父元素中第偶数个子元素，在这里就是指表格中偶数行的<tr>。nth-child(odd)：选择所有父元素中第奇数个子元素，在这里就是指表格中奇数行的<tr>。
这样，你的表格就会自动隔行变色，并且当你的数据更新导致行数变化时，颜色会自动重新计算,非常智能。
Dede标签法（适用于特定场景）
这种方法通常用于调用特定数据（如文章列表、产品列表）时，直接在Dede模板标签中控制奇偶行，它不如CSS方法灵活,但有时在某些特定布局中可能会用到。
操作步骤：
假设我们要在列表页（list_article.htm）中调用文章列表并实现隔行换色。
-
使用
if和mod 在Dede模板中，我们可以利用{if}条件判断和mod求余运算符来判断当前是奇数行还是偶数行。
（图片来源网络，侵删）<table border="1"> <tr> <th>文章标题</th> <th>发布时间</th> </tr> <!-- 调用文章列表 --> {dede:arclist row='10' titlelen='50'} <tr [field:global name=autoindex runphp="yes"] if(@me % 2 == 0){@me='class="even-row"';} else{@me='class="odd-row"';} > <td><a href="[field:arcurl/]">[field:title/]</a></td> <td>[field:pubdate function="MyDate('Y-m-d', @me)"/]</td> </tr> {/dede:arclist} </table> -
编写对应的CSS 同样，你需要在CSS文件中定义
.even-row和.odd-row的样式。/* 偶数行样式 */ .even-row { background-color: #f9f9f9; } /* 奇数行样式 */ .odd-row { background-color: #ffffff; } -
代码解释
[field:global name=autoindex runphp="yes"]：autoindex是Dede内置的变量，表示当前循环的序号（从1开始）。if(@me % 2 == 0){...}：@me代表autoindex的值。% 2是求余运算，如果序号除以2的余数为0,说明是偶数行。@me='class="even-row"'：如果条件成立，就将当前<tr>标签的class属性设置为even-row。else{@me='class="odd-row"'}：如果条件不成立（即奇数行），就将class属性设置为odd-row。
总结与对比
| 特性 | 纯CSS法 | Dede标签法 |
|---|---|---|
| 推荐度 | ⭐⭐⭐⭐⭐ (强烈推荐) | ⭐⭐ (不推荐，除非有特殊需求) |
| 实现方式 | 通过CSS选择器 nth-child() |
通过Dede的 runphp 和 if
|
| 维护性 | 极高，只需修改CSS文件即可改变所有表格样式。 | 较低，样式与模板代码耦合，修改样式需要找到并修改模板文件。 |
| 灵活性 | 极高，适用于任何表格，不受数据来源影响。 | 较低，只适用于使用了特定Dede标签循环的表格。 |
| 性能 | 更好，CSS由浏览器高效渲染。 | 稍差，PHP在服务器端执行了额外的逻辑判断。 |
| 代码清晰度 | 高，HTML结构干净，样式集中管理。 | 低，HTML中混入了PHP逻辑，可读性差。 |
除非你有非常特殊的需求（比如需要根据数据库字段值来动态决定行颜色，而不仅仅是奇偶），否则请务必使用方法一（纯CSS法），它是目前Web开发的标准做法,能让你网站的维护工作事半功倍。
