Modern Neon Glow 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>Modern Neon Glow Table</title> <style> body { font-family: 'Tahoma', sans-serif; background-color: #1a1a1a; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } table { width: 90%; max-width: 1000px; border-collapse: collapse; background-color: #2a2a2a; color: #fff; border: 2px solid #00f7ff; border-radius: 15px; overflow: hidden; box-shadow: 0 0 30px rgba(0, 247, 255, 0.5); } thead { background-color: #00f7ff; color: #2a2a2a; } th, td { padding: 15px; text-align: left; } th { cursor: pointer; text-transform: uppercase; } tbody tr { transition: background-color 0.3s ease; } tbody tr:hover { background-color: #00f7ff; color: #2a2a2a; } tbody tr:nth-of-type(even) { background-color: #333; } @keyframes glowIn { from { box-shadow: 0 0 10px rgba(0, 247, 255, 0.3); } to { box-shadow: 0 0 30px rgba(0, 247, 255, 0.5); } } tbody tr { animation: glowIn 0.5s 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>