Beautiful Table Design
Home
Snippets
Beautiful Table Design
HTML
CSS
JS
<div class="table-container"> <table> <thead> <tr> <th>#</th> <th>Project</th> <th>Status</th> <th>Owner</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Website Redesign</td> <td>In Progress</td> <td>Alex</td> </tr> <tr> <td>2</td> <td>Blog Post Series</td> <td>Completed</td> <td>Sara</td> </tr> <tr> <td>3</td> <td>Mobile App UI</td> <td>Pending</td> <td>John</td> </tr> </tbody> </table> </div>
body { height: 100vh; margin: 0; font-family: 'Inter', sans-serif; background: linear-gradient(to right, #c6ffdd, #fbd786, #f7797d); display: flex; align-items: center; justify-content: center; } .table-container { background: white; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); overflow-x: auto; max-width: 400px; width: 100%; } table { width: 100%; border-collapse: collapse; min-width: 400px; } thead { background: #4a90e2; color: white; } th, td { padding: 13px; text-align: left; } th { font-weight: 600; } tbody tr { border-bottom: 1px solid #e0e0e0; transition: background 0.2s; } tbody tr:nth-child(even) { background: #f9f9f9; } tbody tr:hover { background: #eaf2ff; }
//javascript
Ad #1
Ad #2
Scroll to Top