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

霞舞

发布时间：2026-01-12 16:52:16

412人浏览过

来源于php中文网

原创

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

本文讲解如何通过补全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 ""; // 第一行：列标题 } elseif ($column == 0) { echo ""; // 第一列：行标题 } else { echo ""; } } echo ""; } echo "

	$column	$row	" . ($row * $column) . "

"; ?>

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

⚠️ 关键注意事项：

ClipDrop Relight

ClipDrop推出的AI图片图像打光工具

下载

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

标签不可省略：:nth-child 依赖DOM树层级关系，无

则无有效父级，选择器失效；
每行
必须闭合：原代码中 echo ""; 被错误地移至双循环之外，导致仅最后一行被闭合，其余未闭合，破坏HTML结构；
推荐使用

替代部分	：首行/首列用表头单元格提升可访问性与语义化；若需列交替色（非仅行），可补充 table td:nth-child(odd) { background-color: #e3f2fd; }，但注意行/列颜色会叠加，建议用 :nth-child(odd) > td:nth-child(even) 等组合选择器精细控制。正确补全HTML结构后，浏览器即可准确解析行序号，交替着色将立即生效——这是服务端生成表格时兼顾结构规范与前端样式的最佳实践。

PHP高性能计算函数加密计算慢_加密类高性能函数推荐【汇总】

PHP字符串转日期显示未来时间咋整_修正正负时间戳问题【解答】

PHP非标准日期字符串咋转_自定义格式用DateTime解析【操作】

宝塔PHP8.4环境变量怎么设_配置PHP8.4自定义变量操作【说明】

PHP高性能计算函数科学计算不准_科学计算函数精度设置【详解】

PHP速学教程(入门到精通)

PHP怎么学习？PHP怎么入门？PHP在哪学？PHP怎么学才快？不用担心，这里为大家提供了PHP速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

下载

相关标签:

php css html 前端浏览器 lsp php css html echo 循环 dom 选择器伪类 background table td tr th

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：Oracle SQL中WHERE子句内正确使用条件逻辑的替代方案下一篇：Laravel 实现团队缺勤日历的高效渲染方案

作者最新文章

历史演义跑团类游戏《捉刀》Steam上线获特别好评

2026-01-11 10:43

如何分析图遍历算法的空间复杂度：以邻接矩阵+BFS路径检测为例

2026-01-11 10:55

赢了才能开电脑，开发者耗时 10 个月自制 UEFI 小游戏合集

2026-01-11 10:55

视频号后台如何设置自动回复

2026-01-11 10:55

如何正确使用 Go 的 encoding/xml 包进行序列化与反序列化

2026-01-11 11:03

汉印错题app怎么打印文档-文档打印步骤

2026-01-11 11:08

全民K歌如何设置出好听音效

2026-01-11 11:08

Laravel 中正确绑定数组参数实现 WHERE IN 查询的完整指南

2026-01-11 11:14

Bootstrap 5 多卡片轮播：实现每页显示 3 张卡片的完整方案

2026-01-11 11:29

如何在 AnyChart 中通过按钮切换多组数据实现极坐标柱状图的动态展示

2026-01-11 11:31

热门AI工具

DeepSeek

幻方量化公司旗下的开源大模型平台

AI大模型

开放平台

豆包大模型

字节跳动自主研发的一系列大型语言模型

AI大模型

通义千问

阿里巴巴推出的全能AI助手

AI大模型

腾讯元宝

腾讯混元平台推出的AI助手

文档处理

Excel 表格

文心一言

文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。

AI大模型

中文写作

讯飞写作

基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

中文写作

写作工具

即梦AI

一站式AI创作平台，免费AI图片和视频生成。

图片拼接

图画生成

ChatGPT

最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

AI大模型

中文写作

智谱清言 - 免费全能的AI助手

AI大模型

PDF 文档

相关专题

php文件怎么打开

打开php文件步骤：1、选择文本编辑器；2、在选择的文本编辑器中，创建一个新的文件，并将其保存为.php文件；3、在创建的PHP文件中，编写PHP代码；4、要在本地计算机上运行PHP文件，需要设置一个服务器环境；5、安装服务器环境后，需要将PHP文件放入服务器目录中；6、一旦将PHP文件放入服务器目录中，就可以通过浏览器来运行它。

2437

2023.09.01

php怎么取出数组的前几个元素

取出php数组的前几个元素的方法有使用array_slice()函数、使用array_splice()函数、使用循环遍历、使用array_slice()函数和array_values()函数等。本专题为大家提供php数组相关的文章、下载、课程内容，供大家免费下载体验。

1562

2023.10.11

php反序列化失败怎么办

php反序列化失败的解决办法检查序列化数据。检查类定义、检查错误日志、更新PHP版本和应用安全措施等。本专题为大家提供php反序列化相关的文章、下载、课程内容，供大家免费下载体验。

1460

2023.10.11

php怎么连接mssql数据库

连接方法：1、通过mssql_系列函数；2、通过sqlsrv_系列函数；3、通过odbc方式连接；4、通过PDO方式；5、通过COM方式连接。想了解php怎么连接mssql数据库的详细内容，可以访问下面的文章。

951

2023.10.23

php连接mssql数据库的方法

php连接mssql数据库的方法有使用PHP的MSSQL扩展、使用PDO等。想了解更多php连接mssql数据库相关内容，可以阅读本专题下面的文章。

1414

2023.10.23

html怎么上传

html通过使用HTML表单、JavaScript和PHP上传。更多关于html的问题详细请看本专题下面的文章。php中文网欢迎大家前来学习。

1234

2023.11.03

PHP出现乱码怎么解决

PHP出现乱码可以通过修改PHP文件头部的字符编码设置、检查PHP文件的编码格式、检查数据库连接设置和检查HTML页面的字符编码设置来解决。更多关于php乱码的问题详情请看本专题下面的文章。php中文网欢迎大家前来学习。

1445

2023.11.09

php文件怎么在手机上打开

php文件在手机上打开需要在手机上搭建一个能够运行php的服务器环境，并将php文件上传到服务器上。再在手机上的浏览器中输入服务器的IP地址或域名，加上php文件的路径，即可打开php文件并查看其内容。更多关于php相关问题，详情请看本专题下面的文章。php中文网欢迎大家前来学习。

1305

2023.11.13

Java 项目构建与依赖管理（Maven / Gradle）

本专题系统讲解 Java 项目构建与依赖管理的完整体系，重点覆盖 Maven 与 Gradle 的核心概念、项目生命周期、依赖冲突解决、多模块项目管理、构建加速与版本发布规范。通过真实项目结构示例，帮助学习者掌握从零搭建、维护到发布 Java 工程的标准化流程，提升在实际团队开发中的工程能力与协作效率。

2026.01.12

热门下载

网站特效

网站源码

网站素材

前端模板