html浅灰色-3浅灰色大气通用表格表格CSS【示例演示/源码下载】

bendan520 html

2023-09-02 0 7,213 百度已收录

立即下单

进入商城

进不了网站？换个网络试试！

今天因为需要制作一个Table表格，所以浅灰色更适合通用的风格。经过寻找，最后结合自己的修改，现在做出了几张好看的Table，分享给大家。

我做了3种大气通用的桌子样式。

普通式通用形式

演示下载

这种风格，灰白背景，是最常见、最常见的，一般教程网站都会使用。浅灰色，大气html浅灰色，看着舒服，眼睛看久了也不觉得累。

完整代码





  
  <style type="text/css">
  table {
    border-collapse: collapse;
    margin: 0 auto;
    text-align: center;
  }
  
  table td,
  table th {
    border: 1px solid #cad9ea;
    color: #666;
    height: 30px;
  }
  
  table thead th {
    background-color: #CCE8EB;
    width: 100px;
  }
  
  table tr:nth-child(odd) {
    background: #fff;
  }
  
  table tr:nth-child(even) {
    background: #F5FAFA;
  }
  



  
    
    
      
        
        
        
        
      
    
    
      
      
      
      
    
    
      
      
      
      
    
    
      
      
      
      
    
    
      
      
      
      
    
    
      
      
      
      
    
    
      
      
      
      
    
  
      班级学生成绩表
  姓名   性别   年龄   成绩 
 张丽丽   女   15   85 
 李小刚   男   14   78 
 张晓明   男   16   85 
 马小东   男   15   82 
 陈小梅   女   15   74 
 刘小光   男   14   86

班级学生成绩表
姓名	性别	年龄	成绩
张丽丽	女	15	85
李小刚	男	14	78
张晓明	男	16	85
马小东	男	15	82
陈小梅	女	15	74
刘小光	男	14	86

阴影样式一般形式

给表格添加阴影其实很简单，在CSS中多加一句就可以了。

table {
    box-shadow:0px 3px 5px 0px #999; //阴影
}

所以之前普通样式的CSS代码就做成这样了。


  table {
    border-collapse: collapse;
    margin: 0 auto;
    text-align: center;
  }
  
  table td,
  table th {
    border: 1px solid #cad9ea;
    color: #666;
    height: 30px;
  }
  
  table thead th {
    background-color: #CCE8EB;
    width: 100px;
  }
  
  table tr:nth-child(odd) {
    background: #fff;
  }
  
  table tr:nth-child(even) {
    background: #F5FAFA;
  }
  table {
    box-shadow:0px 3px 5px 0px #999; //阴影
  }

可以设置shadow box-shadow的参数。这4个参数是：水平阴影、垂直阴影、阴影偏差和阴影扩散。

下表显示了这样的功效。

演示下载

带圆角的通用形式

给桌子添加圆角使其看起来更圆润。许多人喜欢圆角桌，这也是当今大多数 UI 设计选择。

因此，我做了另一张圆角桌子，既优雅又百搭。

不过圆角样式在之前的普通样式中已经无法改变，这又是一种完全不同的样式设计思路。

演示下载

背景颜色也是灰白色，标题背景颜色较深。

完整 HTML 代码示例





    
    
    
    * {
        margin: 0;
        padding: 0;
    }
    
    table {
        margin: 50px auto;
        border-spacing: 0;
    }
    
    table th {
        width: 100px;
        height: 30px;
        line-height: 30px;
        background: #c1c1c1;
        color: white;
    }
    
    table td {
        width: 100px;
        height: 30px;
        text-align: center;
        line-height: 30px;
    }
    
    table tr th:first-child,
    table tr td:first-child {
        border-left: 1px solid #cad9ea;
        /* 给table设置左边框 */
        border-right: 1px solid #cad9ea;
    }
    
    table tr th:last-child,
    table tr td:last-child {
        border-left: 1px solid #cad9ea;
        border-right: 1px solid #cad9ea;
        /* 给table设置右边框 */
    }
    
    table tr td:first-child,
    table tr td:nth-child(2),
    table tr td:nth-child(3) {
        border-bottom: 1px solid #cad9ea;
        /* 给tbody各列设置下边框 */
    }
    
    table tr:first-child th:first-child {
        border-top-left-radius: 6px;
        /* 设置table左上圆角 */
    }
    
    table tr:first-child th:last-child {
        border-top-right-radius: 6px;
        /* 设置table右上圆角 */
    }
    
    table tr:last-child td:first-child {
        border-bottom-left-radius: 6px;
        /* 设置table左下圆角 */
    }
    
    table tr:last-child td:last-child {
        border-bottom-right-radius: 6px;
        /* 设置table右下圆角 */
    }
    
    table tr:nth-child(odd) {
        background: #fff;
    }
    
    table tr:nth-child(even) {
        background: #F5FAFA;
    }
    



    
        
            
                
                
                
            
        
        
            
                
                
                
            
            
                
                
                
            
            
                
                
                
            
            
                
                
                
            
        
    姓名 性别 年龄
张丽丽 女 16
陈明 男 18
欧阳珊珊 女 15
李小刚 男 20