CSS实现table表格:隔行换色的效果

ops/2024/9/23 22:18:05/

表格是网页中十分重要的组成元素。表格用来存储数据,包含标题、表头、行和单元格。在HTML语言中,表格标记使用符号<table>表示。定义表格光使用<table>是不够的,还需要定义表格中的行、列、标题等内容。推荐博文:《HTML中Table表格的使用》

在CSS中,可以使用 nth-child 选择器来实现隔行换色。该选择器用于匹配父元素中的特定子元素,nth-child(odd) 可以匹配奇数行,nth-child(even) 可以匹配偶数行。示例如下:

<style>/* 奇数行的颜色 */table tbody tr:nth-child(odd) {background-color: #EFF3F5;}/* 偶数行的颜色 */table tbody tr:nth-child(even) {background-color: #FFFFFF;}
</style>

实例效果:

【实例】使用CSS样式实现 table 表格隔行换色的效果。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="author" content="pan_junbiao的博客"><title>隔行换色的效果</title><style>table {border-collapse: collapse;}table,table tr th,table tr td {border: 1px solid #ddd;text-align: center;padding: 10px;}/* 表头的颜色 */table tbody th{background-color:#64A1D7;}/* 奇数行的颜色 */table tbody tr:nth-child(odd) {background-color: #EFF3F5;}/* 偶数行的颜色 */table tbody tr:nth-child(even) {background-color: #FFFFFF;}</style></head><body><table><tr><th>序号</th><th>博客信息</th><th>博客地址</th></tr><tr><td>1</td><td>您好,欢迎访问 pan_junbiao的博客</td><td>https://blog.csdn.net/pan_junbiao</td></tr><tr><td>2</td><td>您好,欢迎访问 pan_junbiao的博客</td><td>https://blog.csdn.net/pan_junbiao</td></tr><tr><td>3</td><td>您好,欢迎访问 pan_junbiao的博客</td><td>https://blog.csdn.net/pan_junbiao</td></tr><tr><td>4</td><td>您好,欢迎访问 pan_junbiao的博客</td><td>https://blog.csdn.net/pan_junbiao</td></tr><tr><td>5</td><td>您好,欢迎访问 pan_junbiao的博客</td><td>https://blog.csdn.net/pan_junbiao</td></tr></table>
</body></html>


http://www.ppmy.cn/ops/56747.html

相关文章

【Java]认识泛型

包装类 在Java中&#xff0c;由于基本类型不是继承自Object&#xff0c;为了在泛型代码中可以支持基本类型&#xff0c;Java给每个基本类型都对应了一个包装类型。 除了 Integer 和 Character&#xff0c; 其余基本类型的包装类都是首字母大写。 泛型 泛型是在JDK1.5引入的…

Log4j的原理及应用详解(二)

本系列文章简介&#xff1a; 在软件开发的广阔领域中&#xff0c;日志记录是一项至关重要的活动。它不仅帮助开发者追踪程序的执行流程&#xff0c;还在问题排查、性能监控以及用户行为分析等方面发挥着不可替代的作用。随着软件系统的日益复杂&#xff0c;对日志管理的需求也日…

Spring MVC入门3

看完这篇博客你能学到什么 理解JSON的使用理解注解PathVariable理解解注解RequestPart理解cookie和Session的基本概念理解cookie和Session的区别 如果想真正掌握&#xff0c;还需要自己勤加练习。 正文 JSON JSON概念 JSON&#xff1a;JavaScript Object Notation 【JavaS…

Linux-线程同步(条件变量、POSIX信号量)

一、线程同步概念 线程同步&#xff08;Thread Synchronization&#xff09;是多线程编程中的一个重要概念&#xff0c;它指的是在多线程环境中&#xff0c;各个线程按照一定的顺序或规则来执行&#xff0c;以确保数据的完整性和一致性&#xff0c;避免数据竞争&#xff08;Dat…

SpringSecurity中文文档(Servlet OAuth 2.0 Resource Server)

OAuth 2.0 Resource Server Spring Security 通过使用两种形式的 OAuth 2.0无记名令牌来支持对端点的保护: JWTOpaque Tokens 在应用程序将其权限管理委托给授权服务器(例如 Okta 或 Ping Identity)的情况下&#xff0c;这非常方便。资源服务器可以查询此授权服务器来对请求…

未来互联网的新篇章:深度解析Facebook的技术与战略

随着科技的飞速发展和社会的不断变迁&#xff0c;互联网作为全球信息交流的重要平台&#xff0c;正经历着前所未有的变革和演进。作为全球最大的社交媒体平台之一&#xff0c;Facebook不仅是人们沟通、分享和互动的重要场所&#xff0c;更是科技创新和数字化进程的推动者。本文…

Perl基础入门指南:从零开始掌握Perl编程

Perl是一种功能强大且灵活的编程语言&#xff0c;广泛应用于系统管理、Web开发、网络编程和文本处理等领域。如果你是编程新手或者想学习一种新的编程语言&#xff0c;Perl是一个不错的选择。本文将带你了解Perl的基础知识&#xff0c;并通过简单的示例代码帮助你快速入门。 什…

RightFont 8.7.0 Mac专业字体管理工具

RightFont 适用于 macOS 的终极字体管理器应用程序&#xff0c;提供无缝的字体管理体验。它结合了速度、直观的功能和专业的功能&#xff0c;使用户能够轻松预览、安装、组织和共享字体。 RightFont 8.7.0 Mac下载 RightFont 8.0的新增功能 RightFont 8.0 带来了全新的智能选…