How to create HTML Hoverable Table

Use the :hover selector on tr to highlight table rows on mouse over:

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:

What is 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

Single Articles

Full Example of HTML Hoverable Table

HTML Table Styling

Read Full:	HTML Table Styling
Category:	Web Tutorial
Sub Category:	HTML Table Styling
Uploaded by:	Admin
Views:	64

Reffered: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_hover