WebTricks
Home
Home
Tutorials
Q&A Forum
Blog
Videos
Sign up / Register
CSS Tables - Playground
Back to Lesson
HTML Code
<!DOCTYPE html> <html> <head> <title>CSS Tables</title> <meta charset="UTF-8"> </head> <body> <h2>CSS Tables</h2> <table class="mytable"> <thead> <tr> <th>Name</th> <th>Author</th> <th>Price</th> </tr> </thead> <tbody> <tr> <td>Harry Potter and the Cursed Child, Parts 1 & 2</td> <td>J.K. Rowling</td> <td>$320</td> </tr> <tr> <td>When Breath Becomes Air</td> <td>Paul Kalanithi</td> <td>$170</td> </tr> <tr> <td>The Whistler</td> <td>John Grisham</td> <td>$175</td> </tr> </tbody> </table> <style> .mytable{ width: 100%; border-collapse: collapse; cursor: pointer; /* changes cursor to pointer */ } .mytable, .mytable th, .mytable td{ border: 1px solid #ccc; } .mytable th{ text-align: left; } .mytable th, .mytable td{ padding: 5px 10px; } .mytable tbody tr:nth-of-type(odd){ background: #f7f7f7; } .mytable tbody tr:hover{ background: #f3f3f3; } </style> </body> </html>
CSS Code
/* Write your CSS here */
Run Code