CODE:
<!DOCTYPE html>
<html>
<head>
<title>Simple table</title>
<style>
.table1{
outline-width: 2px; outline-style: double;
outline-color:rgb(255, 47, 161);}
th{padding: 15px; background-color: gray;}
td{padding: 10px;}
.table1, th, td{border: 1px solid red;
border-collapse: collapse;}
tr :hover{background-color: yellow;
border: 2px solid green;font-size: 20px;
color: red;border-radius: 10px 20px;}
</style>
</head>
<body>
<table class="table1">
<tr>
<th>Id</th>
<th>Name</th>
<th>Email</th>
<th>Mobile No</th>
<th>Course</th>
</tr>
<tr>
<td>001</td>
<td>John</td>
<td>john@yahoo.com</td>
<td>424323</td>
<td>Java</td>
</tr>
<tr>
<td>002</td>
<td>Rohan</td>
<td>rohann@yahoo.com</td>
<td>15966</td>
<td>Android</td>
</tr>
<tr>
<td>003</td>
<td>Sandy</td>
<td>sandy@yahoo.com</td>
<td>424323</td>
<td>Webside Developer</td>
</tr>
<tr>
<td>004</td>
<td>Shawn</td>
<td>shawn@gmail.com</td>
<td>424323</td>
<td>iOS</td>
</tr>
</table>
</body>
</html>
OUTPUT:
<!DOCTYPE html>
<html>
<head>
<title>Simple table</title>
<style>
.table1{
outline-width: 2px; outline-style: double;
outline-color:rgb(255, 47, 161);}
th{padding: 15px; background-color: gray;}
td{padding: 10px;}
.table1, th, td{border: 1px solid red;
border-collapse: collapse;}
tr :hover{background-color: yellow;
border: 2px solid green;font-size: 20px;
color: red;border-radius: 10px 20px;}
</style>
</head>
<body>
<table class="table1">
<tr>
<th>Id</th>
<th>Name</th>
<th>Email</th>
<th>Mobile No</th>
<th>Course</th>
</tr>
<tr>
<td>001</td>
<td>John</td>
<td>john@yahoo.com</td>
<td>424323</td>
<td>Java</td>
</tr>
<tr>
<td>002</td>
<td>Rohan</td>
<td>rohann@yahoo.com</td>
<td>15966</td>
<td>Android</td>
</tr>
<tr>
<td>003</td>
<td>Sandy</td>
<td>sandy@yahoo.com</td>
<td>424323</td>
<td>Webside Developer</td>
</tr>
<tr>
<td>004</td>
<td>Shawn</td>
<td>shawn@gmail.com</td>
<td>424323</td>
<td>iOS</td>
</tr>
</table>
</body>
</html>
OUTPUT: