How to make an Animated Table using HTML and CSS?

CSSWeb DevelopmentFront End Technology

HTML tables are structural arrangement of information or data in form of rows and columns. Tables are widely used to sort data in organised manner. They are popularly used in communication, research, educational organisations and data analysis. Tables are best way to display information like financial data, price ratings, comparisons, calendars, nutritional facts, client data and many other such data.

In this article, we will deal with how to make an attractive table by giving it animating properties using HTML and CSS.

Let’s understand about a HTML Table.

HTML Tables

HTML tables are those elements which enables the developers to arrange data (like images, text, links etc.,) in tabular form i.e., into rows and columns.

They are created using the <table> tag. <tr> is used to make the table rows while <td> is used to make data cells.

Syntax

<table> <tr> </tr> <td> </td> </table>

Example

Given below is an example demonstrating how to create a HTML table.

<!DOCTYPE html> <head> <title> Creating HTML Tables </title> <style> h1{ color: green; text-align: center; text-decoration: underline; } h2{ text-shadow: 5px 5px 8px #6E0DD0; } .tab, th, td{ border: 2px solid black; width: 50%; padding: 6px; text-align: left; How to make an Animated Table using HTML and CSS? background-color: #f2f2d1; border-spacing: 5px; } </style> </head> <body> <h1> Tutorialspoint </h1> <h2> This is an example to show HTML TABLES </h2> <table class= "tab" > <tr> <th> NAME </th> <th> AGE </th> </tr> <tr> <td> Christina</td> <td> 36</td> </tr> <tr> <td> Joseph </td> <td> 23 </td> </tr> <tr> <td> James </td> <td> 18 </td> </tr> <tr> <td> Angela </td> <td> 51 </td> </tr> </table> </body> </html>

Here,

  • Create a HTML table using the <table>, <tr> and <td> tags.

  • Add heading for each column using <th> tag. Style the table according to your preference.

  • width is used for specifying the cell space of the table. padding is used to specify the cell padding. border-spacing is used for specifying the space between two adjacent cells.

Adding animation effects to the tables

Example

Let us understand how to add animation effects through the examples below

<!DOCTYPE html> <html> <head> <title> Animation effects on Tables </title> <style> h1{ color: green; text-align: center; text-decoration: underline; } h2{ text-shadow: 5px 5px 8px #6E0DD0; } .tab{ margin: auto; table-layout: fixed; } td, tr{ border: 2px solid black; width: 23%; padding: 5px; text-align: center; background-color: #f2f2d1; border-spacing: 5px; border-collapse: collapse; } th{ font-family: algerian; font-size: 20px; border: 2px solid black; border-collapse: collapse; color: #0033FF; } td:hover{ background-color: #00FF66; color: white; } </style> <head> <body> <h1> Tutorialspoint </h1> <h2> This is an example to show animation effects to TABLES </h2> <h3> Marks of the students in the respective subjects are given below. </h3> <table> <tr> <th> Name</th> <th> Science</th> <th> Maths</th> <th> Economics</th> <th> English </th> </tr> <tr> <td> Zara </td> <td> 95</td> <td> 80</td> <td> 83</td> <td> 88 </td> </tr> <tr> <td> Ahmed</td> <td> 91</td> <td> 93 </td> <td> 88 </td> <td> 79 </td> </tr> <tr> <td> Joseph </td> <td> 88 </td> <td> 74 </td> <td> 61 </td> <td> 75 </td> </tr> </table> </body> </html>

Here,

Table-layout is a CSS property which is used to specify the layout of the table.

Its values can be auto (the rows and columns are laid according the content inside it), fixed (the cells are designed according to width of the table), initial and inherit.

Border-collapse is a CSS property which specifies whether the borders should collapse in a single one or should be separated.

Its values can be separate (each cell has its own border), collapse (all borders are collapsed into a single one), initial and inherit.

Example

<!DOCTYPE html> <html> <head> <title> Animation effects on Tables </title> <style> h1{ color: green; text-align: center; text-decoration: underline; } h2{ text-shadow: 5px 5px 8px #6E0DD0; } .tab{ margin: auto; table-layout: fixed; } td, tr{ border: 2px solid black; width: 23%; padding: 5px; text-align: center; background-color: #f2f2d1; border-spacing: 5px; border-collapse: collapse; } th{ font-family: Helvetica; font-size: 25px; border: 2px solid black; border-collapse: collapse; color: brown; } td:hover{ background-color: #FF0099; color: white; transform: scale(1.4); border-radius: 50%; } </style> <head> <body> <h1> Tutorialspoint </h1> <h2> This is an example to show animation effects to TABLES </h2> <h3> Nutritional content in 100gms of food products. </h3> <table> <tr> <th> Food Item</th> <th> Carbohydrate</th> <th> Fats</th> <th> Proteins</th> <th> Calories</th> </tr> <tr> <td> Banana </td> <td> 23g </td> <td> 0.3g</td> <td> 1.2g</td> <td> 89 </td> </tr> <tr> <td> Pizza</td> <td> 33g</td> <td> 10g </td> <td> 11g </td> <td> 266 </td> </tr> <tr> <td> Bread </td> <td> 49g </td> <td> 3.2g </td> <td> 9g </td> <td> 265 </td> </tr> <tr> <td> Burger </td> <td> 24g </td> <td> 14g </td> <td> 17g </td> <td> 295 </td> </tr> </table> </body> </html>

A HTML table is created containing information about the nutrient content of some food products. On hovering a cell, colour of background and text will change. Also, the size of cell will become 1.4 times the original. The shape of the border of each cell will also change.

Here,

CSS transform property enables the developers to move, rotate, skew and scale the HTML elements

In our code, transform: scale(1.4) is used to increase the size of the table cell by 1.4 times.

Conclusion

HTML tables are very useful for sorting data in tabular form. However, HTML tables should not be used for layout due to various reasons. Creating attractive and responsive tables is an easy task when you have some knowledge of CSS properties. All you need to do is apply them and practice until you discover something new.

raja
Updated on 11-Oct-2022 14:48:34

Advertisements