Hi there! In this article, I am going to show you how to create a simple table that will change the row’s background color on mouse hover. Putting a background color on hover will help a user to easily find data on that certain row since it highlights selected row and will easily distinguish it from other rows. We will be using a simple html and css to work on this example.
First thing to do is create you table. You can copy the html code below to easily create the table.
HTML CODE FOR TABLE
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table>
<tr>
<td>Lee</td>
<td>Magbanua</td>
<td>26</td>
</tr>
<tr>
<td>Junmar</td>
<td>Orocio</td>
<td>21</td>
</tr>
<tr>
<td>Johna</td>
<td>Berden</td>
<td>28</td>
</tr>
</table>
</body>
</html>
Put the below css code in between your html head tag <head></head>. The most important part in the code below is the tr:hover selector which changes the white background into the hexadecimal color ffbb22 when a certain row is on mouse over.
CSS CODE TO HIGHLIGHT TABLE ROW ON HOVER
<style>
td{
border:1px solid #000;
}
tr:hover{
background-color:#ffbb22;
}
table{
border-collapse:collapse;
width:50%;
}
</style>
SAMPLE OUTPUT
God bless! ^_^
No comments:
Post a Comment