📜  如何使用 HTML 和 CSS 制作动画表格?

📅  最后修改于: 2021-09-01 01:54:32             🧑  作者: Mango

是按行和列排列的数据,或者可能采用更复杂的结构。表格广泛用于交流、研究和数据分析。

在本文中,我们将创建一个在其列上具有动画效果的表格。我们将使用HTMLCSS来实现它。

方法:分步实施:

第 1 步:使用 HTML创建表格结构:我们将使用 HTML 中的表格标签创建表格结构。

HTML


  

    
    
    
  
    
    GFG Animated Table

  

  
    
    
        
            
            
            
            
            
        
  
        
            
            
            
            
            
        
  
        
            
            
            
            
            
        
  
        
            
            
            
            
            
        
    
Employee NameJob TypeWorking HourSalary
PeterIntern8 Hour10000 Rs
LizaEmployee10 Hour30000 Rs
JohnEmployee10 Hour35000 Rs
  


HTML


  

    
    
    
  
    
    GFG Animated Table
  
    

  

  
    
    
        
            
            
            
            
            
        
          
        
            
            
            
            
            
        
          
        
            
            
            
            
            
        
  
        
            
            
            
            
            
        
    
Employee NameJob TypeWorking HourSalary
PeterIntern8 Hour10000 Rs
LizaEmployee10 Hour30000 Rs
JohnEmployee10 Hour35000 Rs
  


第 2 步:使用 CSS 装饰表格:现在,我们将对之前创建的表格应用 CSS。

/* Set the content of table using
css properties */
table {
    width: 700px;
    margin: auto;
    text-align: center;
    table-layout: fixed;
}
  
/* Applying css properties to 
table components */
table,
td,
tr {
    padding: 12px;
    color: wheat;
    background: indigo;
    border: 1px solid black;
    border-collapse: collapse;
    font-size: 20px;
    font-family: 'Lucida Sans', 
        'Lucida Sans Regular', 
        'Lucida Grande',
        'Lucida Sans Unicode', 
        Geneva, Verdana, sans-serif;
}
  
/* Apply css properties to th */
th {
    color: white;
    border: 1px solid black;
    border-collapse: collapse;
    background: cadetblue;
}
  
/* Apply hover effect to td */
td:hover {
    background: orangered;
}

完整代码:完整的 HTML 代码作为示例提供给您的帮助。代码中添加了注释以便更好地理解。

HTML



  

    
    
    
  
    
    GFG Animated Table
  
    

  

  
    
    
        
            
            
            
            
            
        
          
        
            
            
            
            
            
        
          
        
            
            
            
            
            
        
  
        
            
            
            
            
            
        
    
Employee NameJob TypeWorking HourSalary
PeterIntern8 Hour10000 Rs
LizaEmployee10 Hour30000 Rs
JohnEmployee10 Hour35000 Rs
  

输出:

动画表