Source Code:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <style> #simple-table { font-family: "Lucida Sans Unicode", Sans-Serif; font-size: 16px; background: #fff; width: 500px; border-collapse: collapse; text-align: left; } #simple-table th { font-size: 18px; color: #DD7B62; border-bottom: 2px solid #65AA76; padding: 10px 8px; } #simple-table td { color: #000; padding: 16px 10px 0; } #simple-table tbody tr: hover td { color: #009; } </style> </head> <body> <table id="simple-table" summary="Bollywood Data"> <thead> <tr> <th scope="col">Director</th> <th scope="col">Movie</th> <th scope="col">Budget</th> <th scope="col">Collection</th> </tr> </thead> <tbody> <tr> <td>Ramesh Sippy</td> <td>Sholay</td> <td>50 Crore</td> <td>100 Crore</td> </tr> <tr> <td>Ramgopal Warma</td> <td>Aag</td> <td>50 Crore</td> <td>20 Crore</td> </tr> <tr> <td>Karan Johar</td> <td>Agnipath</td> <td>60 Crore</td> <td>100 Crore</td> </tr> <tr> <td>Rakesh Roshan</td> <td>Krrish</td> <td>100 Crore</td> <td>200 Crore</td> </tr> </tbody> </table> </body> </html>1730
Output Preview :
www.c4learn.com/tutorials/
- Try it yourself