How to make a Animated Table using HTML and CSS ?

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 usingcss 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
CSS-Properties
CSS-Questions
HTML-Questions
HTML-Tags
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.