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

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

相关推荐

  1. Qt qlistwidget自绘,

    2024-07-12 19:40:03       49 阅读
  2. golang实现pdf中自动表格

    2024-07-12 19:40:03       62 阅读
  3. elment-table实现滚动效果

    2024-07-12 19:40:03       33 阅读
  4. TextView 中实现打印效果并且可以

    2024-07-12 19:40:03       42 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-12 19:40:03       70 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-12 19:40:03       74 阅读
  3. 在Django里面运行非项目文件

    2024-07-12 19:40:03       62 阅读
  4. Python语言-面向对象

    2024-07-12 19:40:03       72 阅读

热门阅读

  1. RGB树-美团2023笔试(codefun2000)

    2024-07-12 19:40:03       26 阅读
  2. python输出/sys/class/power_supply/BAT0/电池各项内容

    2024-07-12 19:40:03       21 阅读
  3. ArcGIS Pro SDK (八)地理数据库 6 版本控制

    2024-07-12 19:40:03       23 阅读
  4. SpringBoot使用手册

    2024-07-12 19:40:03       21 阅读
  5. ROS2-humble学习

    2024-07-12 19:40:03       22 阅读
  6. 代码随想录打卡第二十一天

    2024-07-12 19:40:03       24 阅读
  7. Unity 之 抖音小游戏集成排行榜功能详解

    2024-07-12 19:40:03       22 阅读
  8. adb参数详解

    2024-07-12 19:40:03       22 阅读
  9. Git常用命令

    2024-07-12 19:40:03       25 阅读
  10. 力扣2211.统计道路上的碰撞次数

    2024-07-12 19:40:03       24 阅读
  11. js【详解】声明常量和变量 const let var

    2024-07-12 19:40:03       27 阅读