Full Example of HTML Hoverable Table
Move the mouse over the table rows to see the effect.
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
table { border-collapse: collapse; width: 100%;
}
th, td { padding: 8px; text-align: left; border-bottom: 1px solid #DDD;
}
tr:hover {background-color: #D6EEEE;}
</style>
</head>
<body>
<h2>Hoverable Table</h2>
<p>Move the mouse over the table rows to see the effect.</p>
<table> <tr> <th>First Name</th> <th>Last Name</th> <th>Points</th> </tr> <tr> <td>Peter</td> <td>Griffin</td> <td>$100</td> </tr> <tr> <td>Lois</td> <td>Griffin</td> <td>$150</td> </tr> <tr> <td>Joe</td> <td>Swanson</td> <td>$300</td> </tr> <tr> <td>Cleveland</td> <td>Brown</td> <td>$250</td> </tr>
</table>
</body>
</html>
Output should be:
| Full Example of HTML Hoverable Table | HTML Table Styling |
| HTML Table Styling | HTML Table Styling |
| How to create HTML Table - Zebra Stripes | HTML Table Styling |
| How to create HTML Table - Vertical Zebra Stripes | HTML Table Styling |
| How to create HTML Table Combine Vertical and Horizontal Zebra Stripes | HTML Table Styling |
| How to create HTML Table Horizontal Dividers | HTML Table Styling |
| How to create HTML Hoverable Table | HTML Table Styling |
|
Type
: |
html |
|
Category
: |
Web Tutorial |
|
Sub Category
: |
HTML Table Styling |
|
Uploaded by
: |
Admin |