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

news2024/9/22 15:47:29

表格是网页中十分重要的组成元素。表格用来存储数据,包含标题、表头、行和单元格。在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.coloradmin.cn/o/1922825.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

LeetCode热题100刷题13:64. 最小路径和、62. 不同路径、5. 最长回文子串、1143. 最长公共子序列

64. 最小路径和 class Solution { public:int minPathSum(vector<vector<int>>& grid) {int m grid.size();int n grid[0].size();vector<vector<int>> dp(m,vector<int>(n,INT_MAX));dp[0][0]grid[0][0];if(m1 && n1)return grid…

使用 Apache Pulsar 构建弹性可扩展的事件驱动应用

本视频来自 2024 Apache Pulsar 欧洲峰会&#xff0c;由 David Kjerrumgaard, 《Pulsar in Action》书作者给大家带来的《使用 Apache Pulsar 构建弹性可扩展的事件驱动应用》分享。 嘉宾&#xff5c;David Kjerrumgaard&#xff0c;Apache Pulsar Committer&#xff0c;《Pul…

登录/注册

目录 1.HTML 2.CSS 3.JS 4.资源 5.运行结果 6.下载链接 7.注意事项 1.HTML <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-sca…

我的世界1.21多种服务端开服教程,原版/Forge/Fabric/Paper/Mohist...,Minecraft开服教程

Minecraft&#xff08;MC&#xff09;1.21版多种服务端开服教程&#xff0c;我的世界1.21服务器搭建教程&#xff0c;MC原版/Forge/Fabric/Paper/Mohist服务端搭建教程&#xff0c;我的世界MOD/插件服开服教程。 本教程使用 Linux系统MCSManager 面板来搭建Minecraft服务器。 …

编译打包自己的云手机(redroid)镜像

前言 香橙派上跑云手机可以看之前的文章&#xff1a; 香橙派5plus上跑云手机方案一 redroid(带硬件加速)香橙派5plus上跑云手机方案二 waydroid 还有一个cuttlefish方案没说&#xff0c;后面再研究&#xff0c;cuttlefish的优势在于可以自定义内核且selinux是开启的&#xf…

昇思25天学习打卡营第25天 | ResNet50迁移学习

ResNet50迁移学习 https://gitee.com/mindspore/docs/blob/r2.2/tutorials/application/source_zh_cn/cv/transfer_learning.ipynb 在实际应用场景中&#xff0c;由于训练数据集不足&#xff0c;所以很少有人会从头开始训练整个网络。普遍的做法是&#xff0c;在一个非常大的…

踩坑日记 | 记一次流程图问题排查

踩坑日记&#xff1a;记一次流程图问题排查 标签&#xff1a; activiti | 流程 引言 今天排查了一个流程图问题&#xff0c;耗时2个小时终于解决&#xff0c;记录下来 现象 流程审批驳回报错&#xff1a;Unknown property used in expression: ${xxxx} 使用的是 activiti …

golang json反序列化科学计数法的坑

问题背景 func CheckSign(c *gin.Context, signKey string, singExpire int) (string, error) {r : c.Requestvar formParams map[string]interface{}if c.Request.Body ! nil {bodyBytes, _ : io.ReadAll(c.Request.Body)defer c.Request.Body.Close()if len(bodyBytes) >…

从概念到完成:Midjourney——设计思维与AI技术的完美结合

文章目录 本文来自 Python学研大本营 作者 学研君 去年 AI 爆火的时候&#xff0c;学研君也赶时髦用上了 Midjourney。平时用它生成图片&#xff0c;感觉生成的图片好看&#xff0c;比上网四处找图更省时省事&#xff0c;更合心意&#xff0c;还不用担心版权问题。 给大家看一下…

【Android面试八股文】组件化在项目中有什么意义?

一、没有组件化会出现什么问题? 早期的单一分层模式 问题一:无论分包怎么做,随着项目增大,项目失去层次感,后面接手的人扑街问题二:包名约束太弱,稍有不注意,就会不同业务包直接互相调用,代码高耦合问题三:多人开发在版本管理中,容易出现代码覆盖冲突等问题二、组件…

流程制造业与离散制造业有何差异?流程行业智能制造关注什么?

在当今快速发展的工业领域&#xff0c;智能制造已经成为推动制造业转型升级的关键力量。随着“工业4.0”概念的提出&#xff0c;智能制造的理念和技术被广泛应用于各个制造行业&#xff0c;包括离散制造业和流程制造业。尽管智能制造的起源和发展在很大程度上受到了离散制造业的…

信创终端操作系统上ps命令详解 _ 统信 _ 麒麟 _ 中科方德

原文链接&#xff1a;信创终端操作系统上ps命令详解 | 统信 | 麒麟 | 中科方德 Hello&#xff0c;大家好啊&#xff01;今天给大家带来一篇关于信创终端上ps命令详解的文章。ps命令是Linux和类Unix操作系统中的一个常用命令&#xff0c;用于显示当前系统中的进程状态。本文将详…

【手写数据库内核组件】0301 动态内存池,频繁malloc/free让系统不堪重负,动态内存池让应用自由使用动态内存

动态内存管理 ​专栏内容&#xff1a; postgresql使用入门基础手写数据库toadb并发编程 个人主页&#xff1a;我的主页 管理社区&#xff1a;开源数据库 座右铭&#xff1a;天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物. 文章目录 动态内存管…

AI算法07-人工神经网络Artificial Neural Network | ANN

什么是神经网络 简介 人工神经网络&#xff08;ANN&#xff09;或连接系统是由构成动物大脑的生物神经网络模糊地启发的计算系统。神经网络本身不是算法&#xff0c;而是许多不同机器学习算法的框架&#xff0c;它们协同工作并处理复杂的数据输入。此类系统通过考虑示例“学习…

基于颜色模型和边缘检测的火焰识别FPGA实现,包含testbench和matlab验证程序

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 (完整程序运行后无水印) 将FPGA仿真结果导入到matlab显示结果&#xff1a; 测试样本1 测试样本2 测试样本3 2.算法运行软件版本 vivado2019.2 …

车载视频监控管理方案:无人驾驶出租车安全出行的保障

近日&#xff0c;无人驾驶出租车“萝卜快跑”在武汉开放载人测试成为热门话题。随着科技的飞速发展&#xff0c;无人驾驶技术已逐渐从概念走向现实&#xff0c;特别是在出租车行业中&#xff0c;无人驾驶出租车的推出将为公众提供更为安全、便捷、高效的出行服务。 视频监控技…

IntelliJ IDEA自定义菜单(Menus)、任务栏(toolbars)详细教程

本示例是基于IDEA2024.1Ultimate版本的New UI模式下 一、自定义菜单 1、打开Settings&#xff0c;找到Menus and Toolbars 2、点击右边的Main Menu&#xff0c;点击号&#xff0c;选择Add Action 3、弹出Add Action弹窗&#xff0c;搜索或者选择你要添加的指令 二、自定义工具…

东软医疗 踩在中国医疗科技跃迁的风口上

恐怕没有哪一家本土医疗装备企业能像东软医疗一样&#xff0c;每一段成长的升维都发生在中国医疗科技跃迁史最重要的节点上。 在工业制造领域&#xff0c;医疗装备产业由于涉及数十个学科领域&#xff0c;其技术复合程度毫不逊于今天公众所熟知的EUV光刻机&#xff0c;是一门技…

java基础之接口

接口和抽象类很像&#xff0c;接口是把行为给抽象化&#xff0c;可以理解成一个抽象类抽象到极致的情况下&#xff0c;形成的类&#xff0c;也就是一个抽象类有且只有抽象方法的时候&#xff0c;就可以用接口来写。 一、抽象类与接口在书写上的异同 这是一个抽象类 public abst…

jmeter-beanshell学习8-for循环

一个稍微有点难度的东西 要把响应结果的所有名字都取出来&#xff0c;然后怎么处理看自己需求。比如找某个人是不是在这里&#xff0c;或者把所有人都写进一个文档&#xff0c;我就不编场景了 第一步想要取出所有名字&#xff0c;还得靠万能的正则表达式提取器&#xff0c;jso…