How to make a Animated Table using HTML and CSS ?

Last Updated : 26 May, 2021

Table is an arrangement of data in rows and columns, or possibly in a more complex structure. Tables are widely used in communication, research, and data analysis.

In this article, we are going to create a Table with animation over its columns. We are going to implement it using HTML and CSS.

Approach: Step by step implementation:

Step 1: Create Structure of Table using HTML: We will create a table structure using a table tag in HTML.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" 
        content="IE=edge"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
  
    <!-- Set title of web page -->
    <title>GFG Animated Table</title> 
</head> 
  
<body> 
  
    <!-- Creating the structure of table -->
    <table> 
        <tr> 
            <!-- Creating heading of table -->
            <th>Employee Name</th> 
            <th>Job Type</th> 
            <th>Working Hour</th> 
            <th>Salary</th> 
        </tr> 
  
        <tr> 
            <!-- Add 1st data to table -->
            <td>Peter</td> 
            <td>Intern</td> 
            <td>8 Hour</td> 
            <td>10000 Rs</td> 
        </tr> 
  
        <tr> 
            <!-- Add 2nd data to table -->
            <td>Liza</td> 
            <td>Employee</td> 
            <td>10 Hour</td> 
            <td>30000 Rs</td> 
        </tr> 
  
        <tr> 
            <!-- Add 3rd data to table -->
            <td>John</td> 
            <td>Employee</td> 
            <td>10 Hour</td> 
            <td>35000 Rs</td> 
        </tr> 
    </table> 
</body> 
  
</html> 

Step 2: Decorating Table using CSS: Now, we will apply CSS over the table which we have created earlier.

/* 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; 
} 

Complete Code: Complete HTML code is given as an example for your help. Comments are added in the code for better understanding.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" 
            content="IE=edge"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
  
    <!-- Set title of web page -->
    <title>GFG Animated Table</title> 
  
    <style> 
  
        /* 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; 
        } 
    </style> 
</head> 
  
<body> 
  
    <!-- Creating the structure of table -->
    <table> 
        <tr> 
            <!-- Creating heading of table -->
            <th>Employee Name</th> 
            <th>Job Type</th> 
            <th>Working Hour</th> 
            <th>Salary</th> 
        </tr> 
          
        <tr> 
            <!-- Add 1st data to table -->
            <td>Peter</td> 
            <td>Intern</td> 
            <td>8 Hour</td> 
            <td>10000 Rs</td> 
        </tr> 
          
        <tr> 
            <!-- Add 2nd data to table -->
            <td>Liza</td> 
            <td>Employee</td> 
            <td>10 Hour</td> 
            <td>30000 Rs</td> 
        </tr> 
  
        <tr> 
            <!-- Add 3rd data to table -->
            <td>John</td> 
            <td>Employee</td> 
            <td>10 Hour</td> 
            <td>35000 Rs</td> 
        </tr> 
    </table> 
</body> 
  
</html> 