Introduction
Adding a hover effect to table rows enhances the user experience by making it easier to see which row is currently under the mouse pointer. This effect is especially useful in data-heavy tables, improving readability and interaction. In this guide, you'll learn how to add a simple hover effect to table rows using CSS.
Development Steps
- Create Basic HTML Table Structure: Set up a simple table with headers and data rows.
- Style the Table with CSS: Apply basic styles to the table for better readability.
- Add Hover Effect with CSS: Enhance the table by adding a hover effect to the rows.
Step 1: Create a Basic HTML Table Structure
We’ll start by creating a basic HTML table structure that includes headers and data rows.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table with Hover Effect</title>
</head>
<body>
<!-- Step 1: Basic table structure -->
<div class="table-container">
<table class="hover-table">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ananya</td>
<td>25</td>
<td>Delhi</td>
</tr>
<tr>
<td>Rohan</td>
<td>30</td>
<td>Mumbai</td>
</tr>
<tr>
<td>Meera</td>
<td>22</td>
<td>Bangalore</td>
</tr>
<tr>
<td>Vikram</td>
<td>35</td>
<td>Pune</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Explanation:
- This basic table contains three columns (
Name,Age,City) with a few rows of data. - We will now apply styles to make the table more appealing and add the hover effect.
Step 2: Style the Table with CSS
Next, we’ll add some basic CSS to style the table, including borders, padding, and zebra stripes to improve readability.
<head>
<style>
/* General body styles */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.table-container {
width: 80%;
margin: 20px;
background-color: white;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border-radius: 8px;
overflow: hidden;
}
/* Step 2: Style the table */
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 12px 15px;
text-align: left;
}
th {
background-color: #3498db;
color: white;
text-transform: uppercase;
letter-spacing: 0.1em;
}
td {
border-bottom: 1px solid #ddd;
}
/* Zebra stripes */
tbody tr:nth-child(even) {
background-color: #f2f2f2;
}
</style>
</head>
Explanation:
- Table Styling: We applied padding and text alignment to
thandtd. The table header (th) has a blue background and white text for better visibility. - Zebra Stripes: We used the
nth-child(even)pseudo-class to apply a light background color to every even row for better row distinction.
Step 3: Add Hover Effect with CSS
Now, we’ll add the hover effect to the table rows, so when the user hovers over any row, it highlights.
<head>
<style>
/* General body styles */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.table-container {
width: 80%;
margin: 20px;
background-color: white;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border-radius: 8px;
overflow: hidden;
}
/* Style the table */
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 12px 15px;
text-align: left;
}
th {
background-color: #3498db;
color: white;
text-transform: uppercase;
letter-spacing: 0.1em;
}
td {
border-bottom: 1px solid #ddd;
}
/* Zebra stripes */
tbody tr:nth-child(even) {
background-color: #f2f2f2;
}
/* Step 3: Hover effect for table rows */
tbody tr:hover {
background-color: #e9ecef;
}
</style>
</head>
Explanation:
- Hover Effect: The
tbody tr:hoverselector changes the background color of the row when the user hovers over it. We’ve set the background color to#e9ecef, a light gray, to provide a visual indication that the row is being hovered over.
Complete Example
Here’s the complete HTML and CSS code for the table with a hover effect:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table with Hover Effect</title>
<style>
/* General body styles */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.table-container {
width: 80%;
margin: 20px;
background-color: white;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border-radius: 8px;
overflow: hidden;
}
/* Style the table */
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 12px 15px;
text-align: left;
}
th {
background-color: #3498db;
color: white;
text-transform: uppercase;
letter-spacing: 0.1em;
}
td {
border-bottom: 1px solid #ddd;
}
/* Zebra stripes */
tbody tr:nth-child(even) {
background-color: #f2f2f2;
}
/* Hover effect for table rows */
tbody tr:hover {
background-color: #e9ecef;
}
</style>
</head>
<body>
<!-- Step 1: Basic table structure -->
<div class="table-container">
<table class="hover-table">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ananya</td>
<td>25</td>
<td>Delhi</td>
</tr>
<tr>
<td>Rohan</td>
<td>30</td>
<td>Mumbai</td>
</tr>
<tr>
<td>Meera</td>
<td>22</td>
<td>Bangalore</td>
</tr>
<tr>
<td>Vikram</td>
<td>35</td>
<td>Pune</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Output
You can play with the above HTML in Online HTML Editor and Compiler. Here is the output of the above HTML page.:
Conclusion
In this tutorial, you learned how to add a hover effect to table rows using CSS. By adding the tbody tr:hover selector, you created an interactive table where the rows are highlighted when the user hovers over them. This effect improves the user experience by making it easier to focus on a specific row in data-heavy tables.
Comments
Post a Comment
Leave Comment