Horje

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



Single Articles
Full Example of HTML Hoverable TableHTML Table Styling


Related Articles
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

Type:
Html
Category:
Web Tutorial
Sub Category:
HTML Table Styling
Uploaded by:
Admin