When displaying data in multiple rows and multiple columns, you want your customer to be able to view data through all the columns of a specific row easily. Well, there’s a onMouseOver function in JavaScript that lets you change the background color of the entire row in a table when user places mouse over that row.

Usage:

<table>
<tr>
<td height="18">First name</td>
<td height="18">Last name</td>
<td height="18">Email address</td>
<td height="18">Phone number</td>
</tr>
<tr onmouseover="this.className='change-bg'" onmouseout="this.className='white-bg'" >
<td height="18">Peter</td>
<td height="18">Hug</td>
<td height="18">hisemail@yahoo.com</td>
<td height="18">800-111-0000</td>
</tr>
</table>

In the .css file, add 2 classes and they must be defined with 2 different background colors.

.change-bg{ background: #FFF7D9; }

.white-bg{ background: #ffffff; }