Table test:hover

<!DOCTYPE html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<style type="text/css">
table
{
background: #fff;
border-collapse: collapse;
border-top: 2px solid #222529;
border-bottom: 2px solid #222529;
margin: 20px auto;
padding: 5px;
width: 100%;
}

caption
{
padding: 5px;
text-align: center;
border-top: 1px solid #222529;
background: #f9faff;
color: #282828;
}

th,td
{
padding: 1%;
text-align: center;
}

tr:hover,tr.alt:hover
{
background: #f7dcdf;
}

td
{
border: 1px dotted #222529;
vertical-align: middle;
}

th
{
background: #222529;
color: #fff;
font-weight: bold;
}

th[scope=row]
{
background: #62B1D0;
padding: 5px;
}

tr.alt td
{
background: #daecf5;
}

th a:link, th a:active, th a:visited
{
color: #525357;
font-weight: bold;
}

th a:hover
{
color: #6d787e;
}
</style>

</head>
<body>

<table>
<caption>Test table</caption>

<tr>
<th>ABC</th>
<th>DEF</th>
<th>GHJ</th>
</tr>

<tr>
<td>Lorem</td>
<td>Lipsum</td>
<td style="text-align: center">4/5</td>
</tr>

<tr class="alt">
<td>Lorem</td>
<td>Lipsum</td>
<td style="text-align: center">1/5</td>
</tr>
</table>

</body>
</html>