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

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

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

方法：分步实施：

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

HTML

  

    
    
    
  
    
    

  

  
    
    
        
            
            
            
            
            
        
  
        
            
            
            
            
            
        
  
        
            
            
            
            
            
        
  
        
            
            
            
            
            
        
    
Employee Name
Job Type
Working Hour
Salary
Peter
Intern
8 Hour
10000 Rs
Liza
Employee
10 Hour
30000 Rs
John
Employee
10 Hour
35000 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

  

    
    
    
  
    
    
  
    

  

  
    
    
        
            
            
            
            
            
        
          
        
            
            
            
            
            
        
          
        
            
            
            
            
            
        
  
        
            
            
            
            
            
        
    
Employee Name
Job Type
Working Hour
Salary
Peter
Intern
8 Hour
10000 Rs
Liza
Employee
10 Hour
30000 Rs
John
Employee
10 Hour
35000 Rs

  

输出：

动画表