Toggle navigation
☰
HTML
CSS
Scripting
Database
<!DOCTYPE html> <html> <head> <title>Zebra Striped Table Example</title> <style> body { font-family: sans-serif; margin: 20px; } table { width: 100%; border-collapse: collapse; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } th, td { padding: 15px; text-align: left; border-bottom: 1px solid #ddd; } th { background-color: #2c3e50; color: white; } /* The Zebra Striping Magic */ tbody tr:nth-child(even) { background-color: #f2f2f2; } /* Optional: Hover effect stands out over stripes */ tbody tr:hover { background-color: #e2eafc; } </style> </head> <body> <table> <thead> <tr> <th>Order ID</th> <th>Customer</th> <th>Date</th> <th>Total</th> </tr> </thead> <tbody> <tr> <td>#10045</td> <td>Ainsley Walker</td> <td>Oct 12, 2023</td> <td>$145.00</td> </tr> <tr> <td>#10046</td> <td>Kelley Stone</td> <td>Oct 12, 2023</td> <td>$82.50</td> </tr> <tr> <td>#10047</td> <td>Brady Myers</td> <td>Oct 13, 2023</td> <td>$210.00</td> </tr> <tr> <td>#10048</td> <td>Sara Jenkins</td> <td>Oct 13, 2023</td> <td>$45.00</td> </tr> <tr> <td>#10049</td> <td>Chris O'Dowd</td> <td>Oct 14, 2023</td> <td>$315.20</td> </tr> </tbody> </table> </body> </html>
