How to make a Animated Table using HTML and CSS ? Last Updated : 07 Aug, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report 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. 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; } 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: Comment More infoAdvertise with us Next Article How to Create Image Accordion using HTML and CSS ? R riyamathur Follow Improve Article Tags : Web Technologies Web Templates Similar Reads How to Create Pricing Table using HTML and CSS ? Nowadays, every website contains pricing tables, such as e-commerce, e-tech, and even tourism websites also have pricing tables as they contain their plans, cost of plans, and information about plans to buy new facilities. So the pricing table is one of the most important parts of websites that sell 3 min read How to Create an Animated Search Box using HTML and CSS ? The task is to create an Animated Search Box using HTML and CSS. The search bar is one of the most important components of the website. Basically, it is used for connecting people with websites. In the face of complicated web content, users express their needs by searching keywords, expecting to obt 2 min read How to Create Image Accordion using HTML and CSS ? In this article, we will see how to create an image accordion using HTML & CSS that is basically used for advertising purposes on e-commerce websites. An Accordion is often used to open multiple sections at full width & also content pushes the page content downward.Approach:Create an HTML fi 2 min read How to create Animated bars using HTML and CSS? Dancing bars are one of the classical components that are used in making a good looking website. They are very simple to implement and can be used as a loader or an animation while recording sound. Approach: The approach is to use unordered list to create bars and then animate them using keyframes. 2 min read How to create a table row using HTML? Define a row in a table by using a <tr> tag in a document. This tag is used to define a row in an HTML table. The tr element contains multiple th or td elements. Syntax:<tr> ... </tr>Example: In this example, a table row in HTML5, utilizes the <tr> tag within the <tbody 1 min read How to create Image Stack Illusion using HTML and CSS ? In this article, we are going to create an illusion of images below the main image. It is the same as the image set of the gallery in an older version of Android. This is a simple project, we can achieve our target only by using HTML AND CSS.Overview of the project:Approach:Create a main div in whic 3 min read Like