本文讲解如何通过补全html结构（添加`
`标签）并配合css的`:nth-child`伪类，为php动态生成的乘法表实现正确的奇偶行交替着色效果。
要让CSS中的 tr:nth-child(odd) 和 tr:nth-child(even) 正确生效，HTML必须具备合法的表格嵌套结构：即
→
→
。而原PHP代码中缺失了
开始与结束标签，导致浏览器无法识别
的父容器，:nth-child选择器自然失效——所有行被当作孤立元素处理，样式无法按预期应用。
以下是修正后的完整PHP代码（含语义化优化和首行列标题）：
";
for ($row = 0; $row <= 10; $row++) {
echo "";
for ($column = 0; $column <= 10; $column++) {
if ($row == 0 && $column == 0) {
echo " | "; // 左上角空白表头
} elseif ($row == 0) {
echo "$column | "; // 第一行：列标题
} elseif ($column == 0) {
echo "$row | "; // 第一列：行标题
} else {
echo "" . ($row * $column) . " | ";
}
}
echo " ";
}
echo " ";
?>
配套CSS保持不变，但需确保作用于有效的
上下文：
table {
border-collapse: collapse;
margin: 20px 0;
}
table, th, td {
border: 1px solid black;
}
th, td {
padding: 12px 15px;
text-align: center;
}
.bold {
font-weight: bold;
font-size: 1.3em;
}
table tr:nth-child(odd) {
background-color: #fff9c4; /* 浅黄 */
}
table tr:nth-child(even) {
background-color: #ffcdd2; /* 淡红 */
}
⚠️ 关键注意事项：
立即学习“PHP免费学习笔记（深入）”；
标签不可省略：:nth-child 依赖DOM树层级关系，无
则
无有效父级，选择器失效；
- 每行
必须闭合：原代码中 echo “
“; 被错误地移至双循环之外，导致仅最后一行被闭合，其余
未闭合，破坏HTML结构；
- 推荐使用
| 替代部分 |
：首行/首列用表头单元格提升可访问性与语义化；
- 若需列交替色（非仅行），可补充 table td:nth-child(odd) { background-color: #e3f2fd; }，但注意行/列颜色会叠加，建议用 :nth-child(odd) > td:nth-child(even) 等组合选择器精细控制。
正确补全HTML结构后，浏览器即可准确解析行序号，交替着色将立即生效——这是服务端生成表格时兼顾结构规范与前端样式的最佳实践。
|
|
https://www.php.cn/faq/1970582.html
