📜  纯 CSS 表格

📅  最后修改于: 2021-09-01 02:35:17             🧑  作者: Mango

表格在网站中必不可少,可以将数据、文本、链接、表格、图像等排列成行和列。在 Pure CSS 的帮助下,我们可以设计不同类型的表单。

在纯 CSS 中,我们使用一些类来设置下面列出的表格的样式:

  • pure-table:这个类用于在表格上添加一些样式,例如 – 填充和边框添加到表格元素并带有强调的标题。
  • pure-table-bordered:该类用于为所有表格单元格添加表格垂直和水平边框。
  • pure-table-horizontal:这个类用来绘制只有水平线的表格。
  • pure-table-odd:这个类用来创建斑马纹效果的条纹表,对用户来说更显眼,更有吸引力。

1. 默认表格:这些表格就像普通的 HTML 表格,但填充和边框添加到表格元素和强调标题。要创建默认表,请将类“pure-table”添加

元素。

例子:

HTML


  

  
    
    
  
    
        

  

    

Default Table:

            
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      
Sr no.Employee NameAgeSalary
1John2745000
2Mike2936000
3Miara2550000
  


HTML


  

  
    
    
  
    
    

  

    

Bordered Table:

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          
Sr no.Employee NameAgeSalary
1John2745000
2Mike2936000
3Miara2550000
  


HTML


  

  
    
    
  
    
        
  

  

    

Table with Horizontal Borders:

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          
Sr no.Employee NameAgeSalary
1John2745000
2Mike2936000
3Miara2550000
     


HTML


  

  
    
    
  
    
        

  

    

Striped Table:

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          
Sr no.Employee NameAgeSalary
1John2745000
2Mike2936000
3Miara2550000
4Jasmin2222000
5Anderson2427000
     


输出:

2. Bordered Table:要创建一个带边框的表,在 pure-table 旁边添加类“pure-table-bordered”

元素。这将为表格的所有单元格添加垂直和水平边框。

例子:

HTML



  

  
    
    
  
    
    

  

    

Bordered Table:

                
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          
Sr no.Employee NameAgeSalary
1John2745000
2Mike2936000
3Miara2550000
  

输出:

3. 带有水平边框的表格:要创建这种类型的表格,将类“pure-table-horizontal”与 pure-table 一起添加到

元素。这将创建一个只有水平线的表格。

例子:

HTML



  

  
    
    
  
    
        
  

  

    

Table with Horizontal Borders:

                
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          
Sr no.Employee NameAgeSalary
1John2745000
2Mike2936000
3Miara2550000
     

输出:

4. 条带表:如果行易于区分,则可以轻松可视化大表。将“pure-table-odd”类添加到每个其他 元素以更改行的背景。这将创建一个具有斑马风格效果的条纹表,对用户来说更加明显和有吸引力。

例子:

HTML



  

  
    
    
  
    
        

  

    

Striped Table:

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          
Sr no.Employee NameAgeSalary
1John2745000
2Mike2936000
3Miara2550000
4Jasmin2222000
5Anderson2427000
     

输出: