表是按行和列排列的数据，或者可能采用更复杂的结构。表格广泛用于交流、研究和数据分析。
在本文中，我们将创建一个在其列上具有动画效果的表格。我们将使用HTML和CSS来实现它。
方法：分步实施：
第 1 步：使用 HTML创建表格结构：我们将使用 HTML 中的表格标签创建表格结构。
HTML
GFG Animated Table
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
HTML
GFG Animated Table
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
GFG Animated Table
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
输出：
动画表