如何在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代码（含语义化优化和首行列标题）：

<?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保持不变，但需确保作用于有效的

Pliny

创建、分享和重新组合AI应用程序

下载

上下文：

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

如何在网页中动态展示Excel表格数据

如何在 PHP 中正确调用并执行 Node.js 脚本

如何在网页中动态展示Excel数据并生成图表

PHP 中正确实现“仅首次会话计数”的完整教程

如何在PHP中正确执行Node.js脚本

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

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

下载

相关标签:

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

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

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

作者最新文章

关公大战外星人！武侠×外星异种破界对决！《卜算子》3月6日Steam正式上线

2026-03-06 15:00

央视频在哪能开启弹幕

2026-03-06 15:05

Thymeleaf 邮件模板中阻止表单提交重定向并异步调用 REST API

2026-03-06 15:06

Python spidev.xfer2() 数据交换原理与正确用法详解

2026-03-06 15:10

Svelte 中数组赋值失效的根源与正确更新方式

2026-03-06 15:14

在 Spring WebFlux 中实现响应后异步执行后台任务的正确姿势

2026-03-06 15:19

《Machine Mind》现已在Steam正式发售首发折扣中

2026-03-06 15:23

如何在 Go 中精准提取字符串中引号内的子串

2026-03-06 15:28

如何实现图片轮播滑块的逐图平滑移动

2026-03-06 15:33

Python 中 k != int 恒为 True 的原因与类型检查的正确写法

2026-03-06 15:36

热门AI工具

DeepSeek

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

AI编程开发 AI聊天问答

豆包大模型

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

AI编程开发 AI大模型

通义千问

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

AI编程开发 Agent智能体

腾讯元宝

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

文档处理 Excel 表格

文心一言

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

AI编程开发 AI文本写作

讯飞写作

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

AI文本写作中文写作

即梦AI

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

图片拼接图画生成

ChatGPT

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

AI编程开发 AI文本写作

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

AI编程开发 Agent智能体

相关专题

DOM是什么意思

dom的英文全称是documentobjectmodel，表示文件对象模型，是w3c组织推荐的处理可扩展置标语言的标准编程接口；dom是html文档的内存中对象表示，它提供了使用javascript与网页交互的方式。想了解更多的相关内容，可以阅读本专题下面的文章。

4218

2024.08.14

JavaScript浏览器渲染机制与前端性能优化实践

本专题围绕 JavaScript 在浏览器中的执行与渲染机制展开，系统讲解 DOM 构建、CSSOM 解析、重排与重绘原理，以及关键渲染路径优化方法。内容涵盖事件循环机制、异步任务调度、资源加载优化、代码拆分与懒加载等性能优化策略。通过真实前端项目案例，帮助开发者理解浏览器底层工作原理，并掌握提升网页加载速度与交互体验的实用技巧。

2026.03.06

Rust内存安全机制与所有权模型深度实践

本专题围绕 Rust 语言核心特性展开，深入讲解所有权机制、借用规则、生命周期管理以及智能指针等关键概念。通过系统级开发案例，分析内存安全保障原理与零成本抽象优势，并结合并发场景讲解 Send 与 Sync 特性实现机制。帮助开发者真正理解 Rust 的设计哲学，掌握在高性能与安全性并重场景中的工程实践能力。

2026.03.05

PHP高性能API设计与Laravel服务架构实践

本专题围绕 PHP 在现代 Web 后端开发中的高性能实践展开，重点讲解基于 Laravel 框架构建可扩展 API 服务的核心方法。内容涵盖路由与中间件机制、服务容器与依赖注入、接口版本管理、缓存策略设计以及队列异步处理方案。同时结合高并发场景，深入分析性能瓶颈定位与优化思路，帮助开发者构建稳定、高效、易维护的 PHP 后端服务体系。

108

2026.03.04

AI安装教程大全

2026最全AI工具安装教程专题：包含各版本AI绘图、AI视频、智能办公软件的本地化部署手册。全篇零基础友好，附带最新模型下载地址、一键安装脚本及常见报错修复方案。每日更新，收藏这一篇就够了，让AI安装不再报错！

2026.03.04

Swift iOS架构设计与MVVM模式实战

本专题聚焦 Swift 在 iOS 应用架构设计中的实践，系统讲解 MVVM 模式的核心思想、数据绑定机制、模块拆分策略以及组件化开发方法。内容涵盖网络层封装、状态管理、依赖注入与性能优化技巧。通过完整项目案例，帮助开发者构建结构清晰、可维护性强的 iOS 应用架构体系。

2026.03.03

C++高性能网络编程与Reactor模型实践

本专题围绕 C++ 在高性能网络服务开发中的应用展开，深入讲解 Socket 编程、多路复用机制、Reactor 模型设计原理以及线程池协作策略。内容涵盖 epoll 实现机制、内存管理优化、连接管理策略与高并发场景下的性能调优方法。通过构建高并发网络服务器实战案例，帮助开发者掌握 C++ 在底层系统与网络通信领域的核心技术。

2026.03.03

Golang 测试体系与代码质量保障：工程级可靠性建设

Go语言测试体系与代码质量保障聚焦于构建工程级可靠性系统。本专题深入解析Go的测试工具链（如go test）、单元测试、集成测试及端到端测试实践，结合代码覆盖率分析、静态代码扫描（如go vet）和动态分析工具，建立全链路质量监控机制。通过自动化测试框架、持续集成（CI）流水线配置及代码审查规范，实现测试用例管理、缺陷追踪与质量门禁控制，确保代码健壮性与可维护性，为高可靠性工程系统提供质量保障。

2026.02.28

Golang 工程化架构设计：可维护与可演进系统构建

Go语言工程化架构设计专注于构建高可维护性、可演进的企业级系统。本专题深入探讨Go项目的目录结构设计、模块划分、依赖管理等核心架构原则，涵盖微服务架构、领域驱动设计(DDD)在Go中的实践应用。通过实战案例解析接口抽象、错误处理、配置管理、日志监控等关键工程化技术，帮助开发者掌握构建稳定、可扩展Go应用的最佳实践方法。

2026.02.28

热门下载

网站特效

网站源码

网站素材

前端模板