Dark Mode Elegant 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>Dark Mode Elegant Table</title> <style> body { font-family: 'Arial', sans-serif; background-color: #2c2c2c; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; color: #eaeaea; } table { width: 90%; max-width: 1000px; border-collapse: collapse; background-color: #424242; border-radius: 10px; overflow: hidden; box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); } thead { background-color: #1e1e1e; color: #f0f0f0; text-transform: uppercase; } th, td { padding: 15px; text-align: left; border-bottom: 1px solid #333333; } th { cursor: pointer; } tbody tr { transition: all 0.3s ease; } tbody tr:hover { background-color: #333333; } @keyframes slideIn { from { transform: translateX(-100%); } to { transform: translateX(0); } } tbody tr { animation: slideIn 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>