如何在PHP生成的乘法表中实现行间交替背景色

本文讲解如何通过补全html结构（添加`

要让CSS中的 tr:nth-child(odd) 和 tr:nth-child(even) 正确生效，HTML必须具备合法的表格嵌套结构：即 <table> → <tr> → <td>。而原PHP代码中缺失了 <table> 开始与结束标签，导致浏览器无法识别<tr>的父容器，:nth-child选择器自然失效——所有行被当作孤立元素处理，样式无法按预期应用。

以下是修正后的完整PHP代码（含语义化优化和首行列标题）：

<?php
echo "<table border='1' cellspacing='0' cellpadding='15'>";
for ($row = 0; $row <= 10; $row++) {
    echo "<tr>";
    for ($column = 0; $column <= 10; $column++) {
        if ($row == 0 && $column == 0) {
            echo "<th></th>"; // 左上角空白表头
        } elseif ($row == 0) {
            echo "<th class='bold'>$column</th>"; // 第一行：列标题
        } elseif ($column == 0) {
            echo "<th class='bold'>$row</th>"; // 第一列：行标题
        } else {
            echo "<td>" . ($row * $column) . "</td>";
        }
    }
    echo "</tr>";
}
echo "</table>";
?>

配套CSS保持不变，但需确保作用于有效的<table>上下文：

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; /* 淡红 */
}

⚠️ 关键注意事项：

Wave.Video

一个在线的AI自动化视频创作平台

下载

立即学习“PHP免费学习笔记（深入）”；

• <table> 标签不可省略：:nth-child 依赖DOM树层级关系，无<table>则<tr>无有效父级，选择器失效；
• 每行<tr>必须闭合：原代码中 echo "</tr>"; 被错误地移至双循环之外，导致仅最后一行被闭合，其余<tr>未闭合，破坏HTML结构；
• 推荐使用<th>替代部分<td>：首行/首列用表头单元格提升可访问性与语义化；
• 若需列交替色（非仅行），可补充 table td:nth-child(odd) { background-color: #e3f2fd; }，但注意行/列颜色会叠加，建议用 :nth-child(odd) > td:nth-child(even) 等组合选择器精细控制。

正确补全HTML结构后，浏览器即可准确解析行序号，交替着色将立即生效——这是服务端生成表格时兼顾结构规范与前端样式的最佳实践。