How to make a Animated Table using HTML and CSS ?
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
Please Login to comment...