Skip to content
Related Articles

Related Articles

Improve Article

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>

Output:

Animated table

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :