Vibrant Gradient Table - MeggiTools
Run
Toggle Theme
Share Link
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vibrant Gradient Table</title> <style> body { font-family: 'Georgia', serif; background-color: #ffecf0; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } table { width: 90%; max-width: 1000px; border-collapse: collapse; background: linear-gradient(45deg, #ff6b6b, #ffca28); border-radius: 15px; overflow: hidden; color: #fff; box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); } thead { background: rgba(0, 0, 0, 0.1); } th, td { padding: 15px; text-align: left; } th { cursor: pointer; } tbody tr { transition: background-color 0.3s ease; } tbody tr:hover { background-color: rgba(0, 0, 0, 0.1); } tbody tr:nth-of-type(even) { background-color: rgba(255, 255, 255, 0.1); } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } tbody tr { animation: fadeIn 1s ease-in-out; } </style> </head> <body> <table> <thead> <tr> <th>Name</th> <th>Date</th> <th>Number</th> <th>Score</th> </tr> </thead> <tbody> <tr> <td>John Doe</td> <td>01/01/2024</td> <td>123</td> <td>89%</td> </tr> <tr> <td>Jane Smith</td> <td>02/15/2024</td> <td>456</td> <td>95%</td> </tr> <tr> <td>Sam Wilson</td> <td>03/10/2024</td> <td>789</td> <td>76%</td> </tr> <tr> <td>Lisa Brown</td> <td>04/22/2024</td> <td>321</td> <td>92%</td> </tr> </tbody> </table> </body> </html>